🔁Rendering & Re-rendering

Rendering = React recalculating UI. Re-render happens on state/prop/context change. Render phase (pure, interruptible) → Commit phase (DOM, effects, sync).

1️⃣ What triggers re-render?

State change (via setState / useState setter)
Props change (parent passes new value)
Parent re-renders (children re-render by default)
Context change (any consumer of changed context)

Key: Setting state to the same value (Object.is equality) causes React to bail out — no re-render.

2️⃣ Render vs Commit Phase

Phase	What happens	Interruptible?
Render	Calls component functions, diffs VDOM	✅ Yes (React 18 concurrent)
Commit	Applies DOM changes, runs effects	❌ No, synchronous

useEffect runs after commit. useLayoutEffect runs synchronously in commit (before paint).

3️⃣ Does useRef cause re-render?

No. ref.current updates are:

Mutable (direct assignment)
Not tracked by React
Don't trigger re-renders

This makes refs perfect for:

Storing previous values
DOM references
Mutable counters/timers that don't need to affect UI

Was this helpful?

Found an issue? Report here

Test your Knowledge

2 questions to cement what you just learned.