React 18 implements a new hook: useInsertionEffect.
So with useEffect and useLayoutEffect, what is the order of these 3 hooks at component generation ?
According to the React Docs:
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.
It fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render.
It will run after the render is committed to the screen. So it runs after useLayoutEffect.
Therefore the order of running is: