--- title: What is the ‘useLayoutEffect’ Hook and When Do You Use It? description: The use layoutEffect hook runs synchronously directly after React calculates the DOM changes but before it paints those changes to the screen. The biggest... canonical: https://daily.dev/posts/what-is-the-uselayouteffect-hook-and-when-do-you-use-it--gdy-qf4bg twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: What is the ‘useLayoutEffect’ Hook and When Do You Use It? | daily.dev og:description: The use layoutEffect hook runs synchronously directly after React calculates the DOM changes but before it paints those changes to the screen. The biggest... og:url: https://daily.dev/posts/what-is-the-uselayouteffect-hook-and-when-do-you-use-it--gdy-qf4bg og:image: https://api.daily.dev/og/posts/gDy_qF4BG.png og:image:alt: What is the ‘useLayoutEffect’ Hook and When Do You Use It? og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # What is the ‘useLayoutEffect’ Hook and When Do You Use It? **[JavaScript in Plain English](https://daily.dev/sources/jsPlainEnglish)** · 2 min read · 23 upvotes · 0 comments ## Summary The use layoutEffect hook runs synchronously directly after React calculates the DOM changes but before it paints those changes to the screen. The biggest reason for using useLayoutEffect is when the code that is being run directly modifies the DOM in a way that is observable to the user. In general, it is best to always use useEffect. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: --- Tags: [#dom](https://daily.dev/tags/dom), [#general-programming](https://daily.dev/tags/general-programming), [#react](https://daily.dev/tags/react) [View this post on daily.dev](https://daily.dev/posts/what-is-the-uselayouteffect-hook-and-when-do-you-use-it--gdy-qf4bg) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"What is the ‘useLayoutEffect’ Hook and When Do You Use It?","url":"https://daily.dev/posts/what-is-the-uselayouteffect-hook-and-when-do-you-use-it--gdy-qf4bg","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/what-is-the-uselayouteffect-hook-and-when-do-you-use-it--gdy-qf4bg"},"datePublished":"2021-09-02T07:37:33.596Z","dateModified":"2026-03-15T05:18:13.875Z","description":"The use layoutEffect hook runs synchronously directly after React calculates the DOM changes but before it paints those changes to the screen. The biggest...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c5664a7f21359bd22f73bae8bcf885f2","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/c5664a7f21359bd22f73bae8bcf885f2","isAccessibleForFree":true,"articleSection":"JavaScript in Plain English","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"JavaScript in Plain English","logo":"https://media.daily.dev/image/upload/s--Dg5QTRuI--/f_auto,q_auto/v1686665538/logos/pe","url":"https://daily.dev/sources/jsPlainEnglish"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/what-is-the-uselayouteffect-hook-and-when-do-you-use-it--gdy-qf4bg","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":23},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"dom,general-programming,react","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"JavaScript in Plain English","item":"https://daily.dev/sources/jsPlainEnglish"},{"@type":"ListItem","position":3,"name":"What is the ‘useLayoutEffect’ Hook and When Do You Use It?"}]} ```