React 18 中 hooks 的顺序是什么？

Question

React 18 implements a new hook: useInsertionEffect .

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

Answer 1

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