Why is useLayoutEffect different from useEffect?

Both useEffect and useLayoutEffect are React Hooks used to handle side effects, but they run at different times in the rendering process.

useEffect

useEffect runs after the browser paints the UI.

• Non-blocking
• Does not affect visual layout
• Best for most side effects

Common use cases:

• Data fetching
• Subscriptions
• Logging
• Updating document title

useLayoutEffect

useLayoutEffect runs synchronously after DOM updates but before the browser paints.

• Blocking
• Can affect layout and measurements
• May cause performance issues if overused

Common use cases:

• Measuring DOM elements
• Synchronously updating layout
• Preventing visual flicker

Which one should you use?

• Use useEffect by default
• Use useLayoutEffect only when you need DOM measurements or layout changes before paint