useLayoutEffect: Synchronous Effects Before Browser Paint
useLayoutEffect is useEffect's synchronous twin, running its code after DOM mutations but before the browser repaints. Use it to read DOM layout and re-render to prevent visual flickers, like positioning a tooltip. Its main footgun: it blocks rendering.
useLayoutEffect is a synchronous version of useEffect that runs after React updates the DOM but before the browser repaints. This gives you a window to make changes that will be painted in the same frame. It's for measuring a DOM element's size or position and then updating state to adjust layout, like calculating a tooltip's position to avoid a flicker. The footgun: because it's synchronous, it blocks painting. Overusing it for non-layout tasks severely degrades performance; always default to useEffect.
Read the original → react.dev
- #react
- #hooks
- #performance
- #rendering
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.