const ref = React.useRef() React.useEffect(() => { ref.current = 'some value' }) // then, later in another hook or something React.useLayoutEffect(() => { console.log(ref.current) // <-- this logs an old value because this runs first! }) So in situations like that, the solution is useLayoutEffect.

Notice that even though the Tooltip component has to render in two passes (first, with tooltipHeight initialized to 0 and then with the real measured height), you only see the final result. This is why you need useLayoutEffect instead of useEffect for this example.

June 4, 2024 - If you were to go through a codebase and replace every useEffect call with useLayoutEffect, it would work in most cases. For example, I’ve taken an example from the React Hooks Cheatsheet that fetches data from a remote server and changes the implementation to use useLayoutEffect over useEffect:

By using useLayoutEffect, we ensure ... a smooth and flicker-free user experience. ... useEffect runs asynchronously after the component has been rendered and painted on the screen....

July 15, 2020 - Notice how the version with useLayoutEffect only updates visually once even though the component rendered twice. The useEffect version, on the other hand, visually renders twice, so you see a flicker where the value is briefly 0.

June 18, 2024 - With useEffect, the callback is executed asynchronously after the component has rendered and the screen has been updated. useLayoutEffect, on the other hand, fires synchronously after all DOM mutations but before the browser has painted the changes.

February 15, 2020 - An example of the first is updating the page title based on a prop. An example of the second is calculating something based on the height of s tendered div (which you'd actually use useLayoutEffect for as this article so nicely points out)

July 3, 2023 - The gif below shows two chat boxes — after the page loads, messages are “fetched” and then each chat box scrolls to the bottom. The left box uses the useLayoutEffect hook to scroll to the bottom and the right one uses useEffect. You can ...

August 12, 2024 - As stated above the useEffect hook is asynchronous this has a significant drawback in that it can only be called after the component has been mounted. This implies that side effects that depend on the layout of the component cannot be carried out using useEffect. Now how do we solve this problem, this is where useLayoutEffect comes in.

July 23, 2025 - We will create a counter and implement it using both useEffect and useLayoutEffect to understand the differences practically. The useEffect is used to perform side effects in function components.

January 15, 2024 - This is because useLayoutEffect is fired synchronously after DOM is mutated and before the browser paints the new changes. Okay, I will like you to notice the change well in order to better understand how it works. Let's reference a DOM element with the useRef React hook and let's perform some changes with the two side effect hooks we've been talking about · import React, {useRef, useEffect, useLayoutEffect) from 'react' const App = () => { const inputRef = useRef(null) useEffect(()=>{ inputRef.current.value = "another user" },[]); useLayoutEffect(()=>{ console.log(inputRef.current.value) },[]); return( <div> <input type="text" value="EmmanuelTheCoder" ref= {inputRef}/> </div> ); } export default App;

September 5, 2021 - useEffect: Runs asynchronously after the DOM has been painted. It is suitable for tasks like data fetching, subscriptions, or logging. useLayoutEffect: Runs synchronously after DOM mutations but before the browser paints.

January 31, 2026 - Practical uses for useLayoutEffect are limited, as useEffect will be a better approach for most side effect management scenarios. However, there are times where useLayoutEffect will work better than useEffect.

March 13, 2023 - Use cases: useEffect is used for handling side effects that don't require synchronous updates, such as fetching data from an API, setting up event listeners, or updating the component's state. useLayoutEffect is used for side effects that require ...

October 28, 2023 - In this example we are using the useLayoutEffect to update the tooltip's position with respect to the target element · Clean up function is exactly similar to the useEffect, so you can just reference it in from above.

April 21, 2025 - The difference comes from where useLayoutEffect will be called before the user can see the visual changes in that render whereas useEffect will be called after a user is able to see the visual changes in that render.

November 5, 2024 - This synchronous behavior makes useLayoutEffect ideal for tasks that require precise control over the DOM’s layout and appearance, helping avoid any visual inconsistencies or flickers. This distinction between uselayouteffect vs useeffect becomes essential in situations where DOM measurements are needed for layout stability. In the example below, useLayoutEffect is used to measure an element’s width immediately after it renders.

April 10, 2023 - So, with their identical syntaxes, what is the difference between these two hooks? Well, there are three key differences: The asynchronous nature of useEffect The DOM flashes The fact that useLayoutEffect is executed before useEffect.

June 1, 2025 - In this case, useLayoutEffect ensures that the height of the div is calculated synchronously and is thus guaranteed to update before the browser paints. This prevents any flickering that could occur if the height adjustment were made in a more ...