Difference between useEffect and useLayoutEffect?

In React, both useEffect and useLayoutEffect are used to run side effects in functional components, but they differ mainly in timing of execution and use cases.

1. `useEffect` (Asynchronous, after paint)

When it runs:

Runs after the component is rendered and painted on the screen
Does not block the browser painting

Use cases:

API calls
Logging
Subscriptions (web sockets, events)
Non-visual side effects

Example:

useEffect(() => {
  console.log("Component rendered");
}, []);

Browser first paints UI → then useEffect runs

2. `useLayoutEffect` (Synchronous, before paint)

When it runs:

Runs after DOM is updated but before the browser paints the screen
Blocks painting until it finishes

Use cases:

Reading layout (e.g., measuring DOM elements)
Synchronous DOM mutations
Avoiding visual flicker

Example:

useLayoutEffect(() => {
  const rect = ref.current.getBoundingClientRect();
  console.log(rect.width);
}, []);

DOM updated → useLayoutEffect runs → then browser paints UI

Key Differences

Feature	useEffect	useLayoutEffect
Execution timing	After paint	Before paint
Blocking UI paint	❌ No	✅ Yes
Performance	Better	Slightly slower
Use case	API calls, side effects	DOM measurements, layout fixes

Simple way to remember

useEffect → “After screen shows”
useLayoutEffect → “Before screen shows”

Interview Tip

If asked:

“When should you avoid useLayoutEffect?”

Say:

Avoid it unless you must measure or modify DOM before paint, because it can hurt performance by blocking rendering.