Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
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.
useLayoutEffect()
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.
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.
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.
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.
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.
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.
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: