In React.js, Hooks are very important for handling state and for other features related to functional components, useLayoutEffect vs useEffect is a hot topic, because both are very similar hooks, but have different ways of operating.

In this article, we will dive deep to understand both the hooks and will do a useLayoutEffect vs useEffect comparison point by point.

The useLayoutEffect hook is very similar to the useEffect hook, but with one difference, the useLayoutEffect hook runs synchronously, after all DOM mutations. This means that it executes immediately after React has performed all the updates to the DOM.

On the other hand, the useEffect hook runs asynchronously in the next render cycle, which may cause a small delay when updating the UI.

Similar to the useEffect hook, the useLayoutEffect hook in react also takes two arguments, one is a call back function and another is a dependency array, which is optional also.

useLayoutEffect vs useEffect in details

Both useEffect and useLayoutEffect are hooks provided by React for handling side effects in functional components.

Let’s explore the differences between useEffect and useLayoutEffect.

Executing Time

useEffect hook runs asynchronously after the component has rendered and all the DOM changes have been applied. It does not block the rendering process.

useLayoutEffect hook runs synchronously immediately after React has performed all the DOM updates but before the browser displays the screen. It blocks the rendering process until the effect is completed.

Use Cases Difference

useEffect hook is mostly used for tasks like data fetching, and subscribing to events.

useLayoutEffect hook is useful when we need to display the result on screen immediately, such as synchronizing with third-party libraries that rely on the DOM structure or calculating layout-dependent values.

Now Let’s understand both the hooks with a counter increment example with react js code.

Example using useEffect Hook

import React, { useState, useEffect } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

In this above code, we have a simple counter component that updates the document title with the current count using the useEffect hook. The effect is triggered whenever the count variable changes.

Example using useLayoutEffect Hook

import React, { useState, useLayoutEffect } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  useLayoutEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

In this above code, we have the same counter component, but we use the useLayoutEffect hook instead of useEffect. The effect is triggered whenever the count variable changes, just like before.

Both are the same, What’s the difference?

The main difference lies in the timing of when these run.

With the useEffect hook, the effect runs asynchronously after the component renders and the DOM updates have been applied. This means that the title update after the browser will display the screen.

With the useLayoutEffect hook, the effect runs synchronously immediately after React has performed all the DOM updates but the title update occurs before the browser renders the updated UI.

Most of the time we use the useEffect hook, but there are cases when the useLayoutEffect hook becomes necessary to use.

Thank you for reading this article, Happy Coding.