## Live Example
Click the link to see a live comparison between `useLayoutEffect` and `useEffect`.
Toggle between them to observe layout flicker.
[Open the live example](https://www.valentinmarko.com/examples/hooks/uselayouteffect)

## What Is useLayoutEffect?

**useLayoutEffect** is a React hook that runs **synchronously after the DOM has been updated**, but **before the browser paints the screen**.

This means:
- The DOM is already updated  
- The user hasn't seen the update yet  
- You can measure layout and perform changes *before* the screen visually updates  


## How useLayoutEffect Differs from useEffect

 **useEffect:**
- Runs **after** the browser paints  
- Does **not** block rendering  
- Best for async tasks, fetching, subscriptions  

**useLayoutEffect:**
- Runs **before** painting  
- Blocks rendering  
- Best for layout reads/writes (e.g., measuring size, position, scroll)





Managing SideEffects in React: useLayoutEffect hook

How useLayoutEffect  manages synchronous side effects in React and how it differs from useEffect maybe enhance it

useLayoutEffect hook in react

Managing SideEffects in React: useLayoutEffect hook