As a react developer, there is a huge chance you have heard about and made use of useEffect, which is a hook that lets you perform a side effect in a function component. What if you want to read layout from the DOM and synchronously re-render?

useLayoutEffect to the rescue

useLayoutEffect is a hook with similar signature to the useEffect. i.e

React.useEffect(() => {
//do something
},[])

React.useLayoutEffect(() => {
//do something
},[])

Effects/updates on useLayoutEffect will run synchronously before the browser paints the screen. To answer the question above, lets look at the diagram below: credit to Donavon West for the diagram

As you can see, LayoutEffect runs after the DOM updates before the browser paints the screen. Which means every change in the LayoutEffect runs synchronously after all DOM mutations before anything displays on the screen. The above diagram also shows that useEffect runs after the browser have painted the screen. To answer the question, to make changes on the layout of a component, or you want your effect to run before the browser paints the screen, the useLayoutEffect should be used.

Conclusion

However, most of the time, what you would use is useEffect reason being that you don't want to block visual update of your component when not necessary. Here are Some link for further research: React hook flow diagram -Donavon West useLayout API reference - React official Documentation