DEV Community

useEffect vs useLayoutEffect: the difference and when to use them

Emmanuel Aiyenigba on April 04, 2022

I sort of noticed that alot of people do not know the difference between the useEffect and useLayoutEffect hooks in React. Finding a use case for...
Read full post
Collapse
 
thcero profile image
theo •

Thank you for the simple and to the point information!

Collapse
 
emmanuelthecoder profile image
Emmanuel Aiyenigba •

I'm glad you find it helpful.

Collapse
 
doshiparth642 profile image
doshiparth642 •

@emmanuelthecoder , I read your article, Actually yesterday I thought I would write article of UseEffect and UseLayoutEffect but........,
after reading your article I thought not necessary to write article on that topic because you can clear all points in Very Simple Manner.

Another thing is that UseEffectand UseLayoutEffect is called after render method called means whenver any DOM mutation occured but if we don't pass array dependency so it's called in infinite loop. That thing applied on both UseEffect and UseLayoutEffect.

So, It's necessary to pass Empty array dependency in the hook as second argument

useLayoutEffect(()=>{
    console.log("something")
    //second argument array dependency
  },[])

useEffect(()=>{
    console.log("something")
    //second argument array dependency
  },[])
Enter fullscreen mode Exit fullscreen mode
Collapse
 
emmanuelthecoder profile image
Emmanuel Aiyenigba •

Thanks for the kind words and the additional point. I'm glad you found the article helpful.
Would be glad if you could give me a follow here and share the article.

Collapse
 
svbzctvxapkkyc profile image
svbzctv •

Yes, yes, but @doshiparth642 has a good point, your article is incorrect in the sense that it doesn't follow the recommended practices.

An useEffect or useLayoutEffect must always have a dependency array, since you don't want it to run every time.

@doshiparth642 pointed that out and you replied with a copy-paste answer, instead of fixing your code.

This article could have been better written by OpenAI (or at least checked by it).

You don't need to change the code, but i leave this comment here for posterity pointing out your apparent inability to correct things :) or to answer to comments

Thread Thread
 
emmanuelthecoder profile image
Emmanuel Aiyenigba •

Hi @svbzctvxapkkyc
Thank you for pointing out the apparent oversight. I have updated the article.

"...Pointing out your apparent inability to correct things..." — if that was the case for me, I could simply hide your comment. But that's not it as I am happy to take corrections and effect them — no one is an island of knowledge.

Also, at the time of writing this article, ChatGPT wasn't released yet but I guess you wouldn't know this.

Thread Thread
 
svbzctvxapkkyc profile image
svbzctv •

You're right, 2022 not 2023 :) Sorry for that oversight.
Thank you for the correction! :)

Collapse
 
aderchox profile image
aderchox • • Edited

Thanks, the explanation is clear, but about this sentence:

By default, React runs the effect after every render

it depends on the dependency array of the useEffect.

Collapse
 
emmanuelthecoder profile image
Emmanuel Aiyenigba •

Yes! by default, React runs side-effect on every render but this can be customized by passing in an array of dependencies.

Collapse
 
svbzctvxapkkyc profile image
svbzctv •

Seems it's your first week with React, Emmanuel. How's the progress going? :)

Collapse
 
valentyn profile image
Valentyn •

Ok, I know I had a case on my previous project where it was better to use useLayoutEffect over useEffect. Thanks.