React useLayoutEffect Hook

In this part, we will learn about react useLayoutEffect which is almost similar to useEffect hook. React useLayoutEffect Hook is mostly have similar working and functionalities as useEffect hook, people usually refers to use useEffect hook much over useLayoutEffect.

Now the question is if react useLayoutEffect is similar and no much difference then why we should use this hook? Okay, useLayoutEffect have only difference is it will get executed before the useEffect hook, and it fires synchronously after all DOM mutations or DOM changes. we can use it to read layout from the DOM and synchronously re-render.

It is also recommended to use useEffect when possible, so you won’t have to face visual update blockage.

Syntax

useLayoutEffect()

React useLayoutEffect Use Case

Example

Let’s just take an example to understand how useLayoutEffect renders first.

Head.js

import React, { useEffect, useLayoutEffect, useRef} from 'react'

export default function Head() {
    let ref = useRef('red')
    useEffect(() => {
        ref.current = 'yellow'
        console.log(ref, 'useEffect Data')
    })

    useLayoutEffect(()=> {
        ref.current = 'green'
        console.log(ref, 'useLayoutEffect Data')
    })
  return (
    <div></div>
  )
}

App.js

import React from 'react';
import Head from './Head';

function App() {

	return (
		<>
			<Head/>	
		</>
		
    );
}

export default App;

In the above example, we didn’t do anything special. We have just compared useLayoutEffect and useEffect, we’re just changing the value of ref in each of these hooks to see which hook will call first.

Output

As we have mentioned, useLayoutEffect will execute first, so in the above image you can see the object of useLayoutEffect has called before the useEffect, And if we change some data then also useLayoutEffect will be called first because useLayoutEffect runs before application get painted and useEffect will be run after first render.

Which One to Choose, useLayoutEffect or useEffect?

There is no such bigger differences between these two hooks, so it will be tricky to select one of these. It simply depends on your needs. If your project has animation or DOM changes in which you don’t want loading after the screen got rendered, then you should use useLayoutEffect over useEffect because as we know, useEffect runs after the application renders or screen gets painted.

If DOM is changing again and again after screen is painted, then the result will be having delay and cause the problems with visual effects. At that time, we should use useLayoutEffect to avoid such kind of unpleasant behaviors.

useEffect vs useLayoutEffect

In most of the cases, useEffect hook is used by developers, but that doesn’t mean useLayoutEffect is useless in front of useEffect hook. So let’s just see key differences between useEffect and useLayoutEffect.

(1) Time of Execution

useLayoutEffect is one step ahead than useEffect in terms of execution. useLayoutEffect is just lightning fast in execution, it runs before the DOM get painted, or Basically, it runs before the application runs. On the other hand, useEffect will run after DOM gets painted, you can see the updates on the very heavy application. When we apply some change and try to render them in the application, then we can see that useEffect rendering after DOM gets painted.

(2) Performance

Of Course, performance makes the major differences, right? In this case, useEffect have advantage over the useLayoutEffect. Because as we know, useEffect runs after DOM gets painted, So if we add some heavy computation and like massive loop then DOM will render first and after that useEffect will work on that computation. Simply, we just avoided user’s waiting time.

On the other hand, useLayoutEffect won’t let DOM painted. It performs the computation first, then DOM will get rendered. Basically, there will be a huge delay in rendering, And also we know that user don’t like to wait more, so It is good to use the useEffect in performance ratio.

Tip: If you want to do heavy computation like this, then using useMemo hook will give more value than these two.

(3) Inconsistent visual changes

In the case of Inconsistent visual changes useLayoutEffect better than useEffect. for example, we are creating an animation for the UI, then in useEffect we need to use refs which will give some flicker while performing the animation at the time of DOM changes. This flicker will be unpleasant if you’re creating some smoother UI.

In useLayoutEffect we can find out animation will be much smoother, faster and clear than useEffect. But you should not really commit to one of these. It is recommended to see both’s effect, then select one of them.

Video Reference: