What is the order of hooks in React 18?

user_11704485 0
Viewed 334

React 18 implements a new hook: useInsertionEffect.

So with useEffect and useLayoutEffect, what is the order of these 3 hooks at component generation ?

react-hooks typescript reactjs javascript
1 Answers

According to the React Docs:

useInsertionEffect

It fires synchronously before all DOM mutations. Use this to inject styles into the DOM before reading layout in useLayoutEffect. So it runs before useLayoutEffect.

useLayoutEffect

It fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render.

useEffect

It will run after the render is committed to the screen. So it runs after useLayoutEffect.

Therefore the order of running is:

  1. useInsertionEffect
  2. useLayoutEffect
  3. useEffect
user_120486250
Related