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

More React tasks

Back to the full React Hooks cheat sheet