The answer depends on what you as a developer consider 'preferable'. In the context of your question useLayoutEffect guarantees that you will see layout before mutation, useEffect shows you what happens after.


If you don't have DOM manipulating code in the hook and only reading layout useEffect will do just fine.

If you do have DOM manipulating code in the useEffect and see screen flickering move this code to useLayoutEffect.

It goes like this:

  1. Render
  2. useLayoutEffect (synchronously after all DOM mutations)
  3. Paint
  4. useEffect


The following diagram always helps me to visualize the flow of hooks and also will let you clarify regarding why useLayoutEffect is recommended over useEffect for DOM based operations (where you're targetting stuff that you can update before current browser paint)

Link to the diagram -

Related Query

More Query from same tag