React, useEffect and useLayoutEffect Gotchas
The difference between the
useLayoutEffect can be vauge. In
daily task 99% of the time
useEffect is way to go. Yet it's nice to now the
difference since it can be useful in some situtations also it's a great
99% of the time this is what we want to use.
useEffect allows you to synchronize a component with an external system.. When
useEffect is called, React knows to render your side effect
only after changes are made to the DOM
useEffect runs after every react render (including the first render).
effected only after the component is rendered so it ensures that your effect
callback does not block browser painting.
If you need your effect to fire synchronously after the DOM mutation before the next browser paint. You wil need to use
useLayoutEffect. Otherwise users could see flickering or visual inconsistencies when DOM mutations take effect.
useLayoutEffect is a version of
useEffect that fires before the browser repaints the screen.
useLayoutEffect runs synchronously immediately after the DOM mutation and before the
browser get to paint the new changes.
This hook is useful for performing DOM measurement (like getting scroll height, scroll position).
|Do not need to interact with DOM
|Need to mutate DOM / need to perform measurements
|Runs after every render, including first render.
|Runs immediately after DOM has been updated/before browser had a chance to "paint" the changes