Ohans Emmanuel
Jul 12, 2023 ⋅ 8 min read

React useLayoutEffect vs. useEffect Hooks with examples

Ohans Emmanuel Visit me at ohansemmanuel.com to learn more about what I do!

Recent posts:

Understanding Solid Js Props A Complete Guide From Beginner To Advanced

Understanding SolidJS props: A complete guide

Let’s see how SolidJS props work to promote component reusability, exploring basic to advanced concepts for a complete understanding.

Temitope Oyedele
Dec 7, 2023 ⋅ 11 min read
Eleventy Vs. Next.js Static-Site Generation

Eleventy vs. Next.js for static site generation

We evaluate Eleventy and Next.js and compare both static site generators in terms of performance, developer experience, scalability, and ecosystem.

Nelson Michael
Dec 7, 2023 ⋅ 11 min read
Build Full-Stack App React Goxygen

Build a full-stack app with React and Goxygen

We show how to use Goxgen to scaffold a full-stack React app. See how to integrate React with Go and modify Goxygen to suit your project requirements.

Clara Ekekenta
Dec 6, 2023 ⋅ 8 min read
Express Js Adoption Guide Overview Examples Alternatives

Express.js adoption guide: Overview, examples, and alternatives

Express.js is a Node.js framework for creating maintainable and fast backend web applications in JavaScript. In the fast-paced world of […]

Antonello Zanini
Dec 6, 2023 ⋅ 17 min read
View all posts

6 Replies to "React useLayoutEffect vs. useEffect Hooks with examples"

  1. OK, IMHO, this whole article was kinda of overkill. But, kudos for the author anyway.


    useLayoutEffect: If you need to mutate the DOM and/or DO need to perform measurements

    useEffect: If you don’t need to interact with the DOM at all or your DOM changes are unobservable (seriously, most of the time you should use this).

    by: Kent C. Dodd (https://kentcdodds.com/blog/useeffect-vs-uselayouteffect)

  2. This was a super helpful article. I liked the way author was showing with live examples the differences between useEffect and useLayoutEffect hooks. Now I finally got it. Awesome!

  3. Utilising live recordings and different examples is quite helpful for grasping the concept to the core. Thanks for the article.

  4. Thank you so much for this! I was searching for something does the work of useLayoutEffect() to prevent the dimming of loading animation while execution of multiple useEffects.

    In my code, my first useEffect calls an Api and that data was using in next api written in next useEffect, also first useEffect was printing on the browser after that fetches the data of first API. Then only it was calling the other useEffect(). That was making the dim on loading. By using useLayoutEffect () the job is done asynchronously.

    Very helpful🙂

Leave a Reply