What is useLayoutEffect hook and when do you use it
Tags: react, webdev
Published: 2020-07-19 16:42:38

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c3zht22ycb6mf6rfz8vj.png)

In this article, we shall look at:
- [An overview of hooks](#overview)
- [Function signature of `useLayoutEffect` hook](#func-signature)
- [Differences between `useLayoutEffect` hook and `useEffect` hook](#differences)
- [When to use `useLayoutEffect` hook](#when)
- [Conclusion](#conclusion)
- [References](#references)

___

## An overview of hooks <a name="overview"></a>

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](https://dev.to/nibble0101/what-is-useeffect-hook-and-how-do-you-use-it-1p9c). The `useEffect` hook is one of the most commonly used hooks in the [React hooks API](https://reactjs.org/docs/hooks-intro.html).

## useLayoutEffect function signature <a name="func-signature"></a>

`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.

```javascript
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 <a name="differences"></a>

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 <a name="when"></a>

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](https://reactjs.org/docs/hooks-reference.html#uselayouteffect), 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](https://reactjs.org/docs/hooks-reference.html#uselayouteffect).

## Conclusion <a name="conclusion"></a>

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](https://twitter.com/login) or any other community of react beginners. Others might find it useful too. You can also follow me on twitter [@mjmawa](https://twitter.com/mjmawa).

## References <a name="references"></a>

- [official react documentation](https://reactjs.org/)
- [useEffect versus useLayoutEffect article by Kent C. Dodds](https://kentcdodds.com/blog/useeffect-vs-uselayouteffect)