In this article, we shall look at:
- An overview of hooks
- Function signature of
useLayoutEffect
hook - Differences between
useLayoutEffect
hook anduseEffect
hook - When to use
useLayoutEffect
hook - Conclusion
- References
An overview of hooks
A hook is a function which enables you use state and other react features without writing ES6 class components. useLayoutEffect
hook is similar to the useEffect
hook. If you haven't come across the useEffect
hook, you can read about it in one of my earlier articles titled what is useEffect hook and how do you use it. The useEffect
hook is one of the most commonly used hooks in the React hooks API.
useLayoutEffect function signature
useLayoutEffect
hook takes a function called effect
as its first argument and an array of dependencies as second argument. The first argument, effect
, either returns a cleanup
function or undefined
. The function signature of useLayoutEffect
is illustrated in the code below.
import React, { useLayoutEffect } from "react";
const APP = props => {
useLayoutEffect(() => {
//Do something and either return undefined or a cleanup function
return () => {
//Do some cleanup here
};
}, [dependencies]);
};
You can notice from the above function signature that both useEffect
and useLayoutEffect
take effect
function and array of dependencies as their arguments and return either undefined
or a cleanup
function.
What is the difference between useEffect
hook and useLayoutEffect
hook
The difference between useEffect
and useLayoutEffect
is in the time when the functions are invoked. To understand when the hooks are invoked, it is helpful to understand that component re-render goes through the following steps. Let us assume we are implementing useEffect
hook in our app.
- User interacts with App. Let us say the user clicks a button.
- Component state changes
- The DOM is mutated
- Changes are painted on the screen
-
cleanup
function is invoked to clean up effects from previous render ifuseEffect
dependencies have changed. -
useEffect
hook is called aftercleanup
.
It should be noted that if a component is being rendered the first time,
cleanup
function is not invoked because there is noeffect
to clean up.
The difference between useEffect
hook and useLayoutEffect
hook is in the timing of their invocation. useEffect
hook is invoked after the DOM has been painted. useLayoutEffect
hook on the other hand is invoked synchronously before changes are painted on the screen. The sequence of steps outlined above for useEffect
implementation can be modified for useLayoutEffect
as shown below.
- User interacts with App. Let us say the user clicks a button.
- Component state changes
- The DOM is mutated
-
cleanup
function is invoked to clean up effects from previous render ifuseLayoutEffect
dependencies have changed. -
useLayoutEffect
hook is called aftercleanup
. - Changes are painted on the screen
It can be concluded from the above explanation that most of the time you don't need useLayoutEffect
. When do you then choose useLayoutEffect
over useEffect
hook?
When to choose useLayoutEffect over useEffect hook
You can use useLayoutEffect
hook instead of useEffect
hook if your effect
will mutate the DOM. useEffect
hook is called after the screen is painted. Therefore mutating the DOM again immediately after the screen has been painted, will cause a flickering effect if the mutation is visible to the client.
useLayoutEffect
hook on the other hand is called before the screen is painted but after the DOM has been mutated. The undesirable behavior, of mutating the DOM immediately after painting the screen, described with useEffect
hook above can be avoided.
Though replacing useEffect
hook with useLayoutEffect
may not have a noticeable effect with simple apps, you are strongly advised against doing so (unless the situation warrants it) as stated in the uselayouteffect documentation, to "avoid blocking visual effects". useLayoutEffect
hook has its own use cases, so does useEffect
hook. Read further about some use cases of useLayoutEffect
at the official react documentation.
Conclusion
We have looked at the differences between useEffect
hook and the useLayoutEffect
hook. Did I miss anything? Feel free to leave a comment below. I will be more than happy to update this article.
Thanks for reading till the end. If you find it useful, consider sharing it on Twitter or any other community of react beginners. Others might find it useful too. You can also follow me on twitter @mjmawa.
Top comments (1)
Thx a lot for sharing