useLayoutEffect vs useEffect

The React useLayouEffect hook is written the same way as useEffect, and almost behaves the same way.
One of the key differences is that it gets executed right after a React component render lifecycle, and before useEffect gets triggered.

useLayoutEffect is identical to useEffect, but it’s major key difference is that it gets triggered synchronously after all DOM mutation.
You only want to use this hook when you need to do any DOM changes directly.

Reference

• https://linguinecode.com/post/when-to-use-useref-and-uselayouteffect