The useLayoutEffect Hook in React is a built-in Hook that allows you to perform synchronous, side effect operations on component updates. It is very similar to useEffect, yet it fires synchronously after all DOM mutations, before the browser has a chance to paint.

When to use it?

While useEffect happens asynchronously and after rendering, useLayoutEffect, on the other hand, is used if you need to mutate the DOM and/or perform measurements and you want to ensure these actions are done before the browser has had a chance to paint. This can be ideal for actions that require immediate feedback, such as adjusting an element's dimensions to prevent flickering or resizing.

How to use useLayoutEffect

Its usage is very similar to useEffect. It accepts a function that will be run after the component render and before the screen is updated, and a second argument, an array of dependencies.

import React, { useLayoutEffect } from 'react';
function ExampleComponent() {
  useLayoutEffect(() => {
    // Action to be done before paint,
    // such as DOM mutation or measurements
  });
  return (
    // return JSX
  );
}
export default ExampleComponent;

Imagine you have some toy blocks that help you build amazing things. Similarly in React, useLayoutEffect is like a special toy block we use when creating websites. It helps us do certain things immediately after we've put something on the screen.

What does useLayoutEffect do?

Let's say you've drawn a beautiful picture and now you want to add glitter to it. But, you want the glitter to stick exactly where you've drawn. useLayoutEffect is like the glue which sticks the glitter exactly where you want, immediately after your drawing is ready. In website language, useLayoutEffect can change things on the website right after the website displays something.

When should we use useLayoutEffect?

We only use useLayoutEffect when something really important depends on it, like sticking glitter to our drawing. Mostly we use another simpler toy block named useEffect. But sometimes, when useEffect can't help us stick the glitter properly, we use useLayoutEffect.

How is it different from useEffect?

If useLayoutEffect is strong glue, then useEffect is a regular glue. They both stick glitter (change things on website) but useLayoutEffect does it immediately after the drawing (website) is ready. But useEffect waits for a little while before sticking the glitter. So, we could say useLayoutEffect is more 'eager' than useEffect!

A simple usage of useLayoutEffect

import React, { useLayoutEffect } from 'react';

function MyWebsite() {
  useLayoutEffect(() => {
    // This is where we put our glitter (make changes) after our drawing (website) is ready.
  });

  return <div>Welcome to my website!</div>;
}

Remember, useLayoutEffect is a special toy block and we use it only when we really need it. Most of the time, we will use useEffect, which is simpler and works for most things!