When would you choose useLayoutEffect over useEffect?
WHAT IT TESTS: React commit phase and paint timing. ANSWER OUTLINE: Use useLayoutEffect to measure or mutate DOM before paint to stop flicker; useEffect runs after paint. RED FLAG: Using it for data fetching or ignoring its blocking cost.
WHAT IT TESTS: Deep understanding of React's commit phase, browser paint cycles, and synchronous DOM measurement to avoid visual inconsistency. ANSWER OUTLINE: Choose useLayoutEffect to read layout metrics and immediately adjust DOM before the browser paints, preventing a flash of wrong content; reserve useEffect for subscriptions and data fetching that should not block paint. RED FLAG: Defaulting to useLayoutEffect for all effects, claiming it is only for SSR, or omitting that it blocks the main thread and hurts perceived performance.
Read the original → react.dev
- #react
- #hooks
- #uselayouteffect
- #performance
- #dom
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.