If you have worked at all with React hooks before then you have used the useEffect
hook extensively. You may not know, though, that there is a second type of useEffect
hook called useLayoutEffect
. In this article I will be explaining the useLayoutEffect
hook and comparing it to useEffect
. If you are not already familiar with _useEffect_
check out my full article on it here.
Everything about these two hooks is nearly identical. The syntax for them is exactly the same and they are both used to run side effects when things change in a component. The only real difference is when the code inside the hook is actually run.
In useEffect
the code in the hook is run asynchronously after React renders the component. This means the code for this hook can run after the DOM is painted to the screen.
The useLayoutEffect
hook runs synchronously directly after React calculates the DOM changes but before it paints those changes to the screen. This means that useLayoutEffect
code will delay the painting of a component since it runs synchronously before painting, while useEffect
is asynchronous and will not delay the paint.
#react #javascript #developer