#141 What happens during React's render and commit phases?

React Update Lifecycle

When state/props change in a component → React updates in two phases:

1. Render Phase 🖊️ (a.k.a. Reconciliation)
2. Commit Phase ✅ (apply changes to DOM)

---

1️⃣ Render Phase (Reconciliation Phase)

• What happens?
  • React builds a virtual DOM tree based on updated state/props.
  • Runs diffing algorithm (compare old Virtual DOM vs new Virtual DOM).
  • Figures out what needs to change (called “effect list”).
• Characteristics:
  • Can be paused, aborted, restarted (thanks to Fiber).
  • Pure calculation only → does not touch the DOM yet.
  • Runs component functions (render) and hooks (useState, useEffect, etc.).

✅ Example:

function Counter() {
  const [count, setCount] = React.useState(0);
  console.log("Render phase running...");

  return <h1>{count}</h1>;
}

👉 When setCount(1) is called:

• React runs the component function again.
• Prepares new Virtual DOM (<h1>1</h1>).
• Decides: only text inside <h1> needs updating.

---

2️⃣ Commit Phase

• What happens?
  • React applies the prepared changes to the real DOM.
  • Runs DOM mutations (insert, update, delete nodes).
  • Runs side-effects (useEffect, componentDidMount, componentDidUpdate).
• Characteristics:
  • Synchronous and cannot be interrupted (React must update UI fully).
  • Quick but final step → user sees UI update.

✅ Example:

function Counter() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    console.log("Commit phase: DOM updated with count =", count);
  }, [count]);

  return <h1>{count}</h1>;
}

👉 When count changes:

• Render phase → React prepares <h1>new count</h1>.
• Commit phase → React updates DOM and then runs useEffect.

---

🔹 Visualization

[State/Prop Change]
        ↓
    Render Phase 🖊️ (Virtual DOM, diffing, prepare changes)
        ↓
    Commit Phase ✅ (Update real DOM + run useEffect, refs, lifecycle methods)

---

🔹 Example Timeline

function App() {
  const [num, setNum] = React.useState(0);

  console.log("Render Phase"); // Runs every render

  React.useLayoutEffect(() => {
    console.log("Commit Phase - useLayoutEffect");
  });

  React.useEffect(() => {
    console.log("Commit Phase - useEffect");
  }, [num]);

  return (
    <div>
      <h1>{num}</h1>
      <button onClick={() => setNum(num + 1)}>Increment</button>
    </div>
  );
}

🔸 When button clicked:

1. Render Phase runs (prints log).
2. DOM updates (<h1> changes).
3. Commit Phase: useLayoutEffect runs first, then useEffect.

---

🔹 Quick Summary

Phase	What Happens?	Can Be Interrupted?	Runs Effects?
Render	Create Virtual DOM, diffing, prepare changes	✅ Yes	❌ No
Commit	Apply changes to Real DOM, run effects	❌ No	✅ Yes (useEffect, refs, lifecycle)