What is the difference between useEffect and useLayoutEffect?

Question

Accepted Answer

**useEffect** and **useLayoutEffect** both run side effects, but timing differs. **useEffect:** - Runs **asynchronously** after paint - Browser has rendered the update - Non-blocking **useLayoutEffect:** - Runs **synchronously** after DOM mutations, before paint - Browser hasn't rendered yet - Blocks rendering **Code:** ```tsx import { useEffect, useLayoutEffect, useState } from "react"; function Component() { const [size, setSize] = useState({ width: 0, height: 0 }); // ✅ useLayoutEffect — measure DOM before paint useLayoutEffect(() => { const { width, height } = document.getElementById("box")?.getBoundingClientRect() || {}; setSize({ width, height }); }, []); // ❌ useEffect — causes flicker // useEffect(() => { // const { width, height } = document.getElementById("box")?.getBoundingClientRect() || {}; // setSize({ width, height }); // }, []); return (

Size: {size.width} x {size.height}

); } ``` **When to use useLayoutEffect:** 1. Measuring DOM elements 2. Animations that need to prevent flicker 3. Syncing with external libraries **When to use useEffect:** 1. Data fetching 2. Event listeners 3. Logging 4. Anything that doesn't block paint **Performance warning:** - useLayoutEffect blocks paint - Don't use for expensive computations - Only when you need to measure before paint

React: What is the difference between useEffect and useLayoutEffect?