What is useLayoutEffect hook and when do you use it

In this article, we shall look at:

• An overview of hooks
• Function signature of useLayoutEffect hook
• Differences between useLayoutEffect hook and useEffect 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.

1. User interacts with App. Let us say the user clicks a button.
2. Component state changes
3. The DOM is mutated
4. Changes are painted on the screen
5. cleanup function is invoked to clean up effects from previous render if useEffect dependencies have changed.
6. useEffect hook is called after cleanup.

It should be noted that if a component is being rendered the first time, cleanup function is not invoked because there is no effect 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.

1. User interacts with App. Let us say the user clicks a button.
2. Component state changes
3. The DOM is mutated
4. cleanup function is invoked to clean up effects from previous render if useLayoutEffect dependencies have changed.
5. useLayoutEffect hook is called after cleanup.
6. 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.

References

• official react documentation
• useEffect versus useLayoutEffect article by Kent C. Dodds