What is React useEffect vs useLayoutEffect?

Question

Accepted Answer

**useEffect:** Runs after paint (async), non-blocking. Good for: data fetching, subscriptions, logging.

```tsx
useEffect(() => { fetch("/api/data"); }, []);
```

**useLayoutEffect:** Runs after DOM mutation, before paint (sync), blocks paint. Good for: DOM measurements.

```tsx
useLayoutEffect(() => {
  const rect = ref.current.getBoundingClientRect();
  setHeight(rect.height);
}, []);
```

**When useLayoutEffect:** Measuring element size/position, preventing visual flicker, synchronizing with DOM.

**Default:** Use useEffect unless you need sync DOM access.

React: What is React useEffect vs useLayoutEffect?