useLayoutEffect in React
From the React Hooks cheat sheet · Side Effects · verified Jul 2026
useLayoutEffect
Synchronous DOM updates
javascript
// Runs synchronously after DOM mutations
useLayoutEffect(() => {
// Measure DOM
const height = ref.current.scrollHeight
// Adjust DOM before browser paint
ref.current.style.height = `${height}px`
}, [])⚠️ Blocks visual updates - use sparingly
💡 Same API as useEffect but synchronous
Continue with React Hooks
Save the full cheat sheet or work through every related task.