Hook · Synchronous synchronization
useLayoutEffect
Before the browser paints
useLayoutEffect runs right after the DOM commit but before the browser paints. Use it when you need to measure the DOM and apply a change before the user sees the intermediate result.
The real use case
Tooltips that reposition based on their size, animations that need a calculated initial position, scroll adjustments after inserting content. If you use useEffect in these cases, you'll see a flicker.
The cost
It blocks the browser from painting. If the work is heavy, it hurts the frame rate. The rule: useEffect by default, useLayoutEffect only when you need to measure and mutate the DOM in the same turn.
Common pitfalls
- 01useLayoutEffect blocks the browser from painting — keep it fast. If the logic can wait, use useEffect.
- 02In SSR it fires synchronously on the server: avoid side effects that only make sense in the browser.
- 03Reading layout and synchronously triggering a re-render can cause a double render cycle — profile before using it.
Was this helpful?
Sign in to give feedback