#128 What is Reconciliation in React?

Reconciliation is the process React uses to update the DOM when your app’s state or props change.

• How it works:
  1. React creates a new Virtual DOM tree whenever a component re-renders.
  2. It compares the new Virtual DOM with the previous Virtual DOM (using the diffing algorithm).
  3. React finds the minimum number of changes needed.
  4. Finally, it updates only those parts in the Real DOM (not the entire page).
• Why important?
  • Makes React apps fast.
  • Avoids unnecessary DOM manipulations.
  • Provides smooth UI updates.
• Key points in reconciliation:
  • Different element types → replace entire node.
  • Same element types → update attributes/props only.
  • Lists → key helps React efficiently update list items.

---

🔹 Example: Reconciliation in Action

import React, { useState } from "react";

function ReconciliationExample() {
  const [count, setCount] = useState(0);
  const [fruits, setFruits] = useState(["Apple", "Banana"]);

  return (
    <div>
      {/* ✅ React only updates the text, not entire button */}
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>

      <h3>Fruits List</h3>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li> {/* key helps reconciliation */}
        ))}
      </ul>

      <button onClick={() => setFruits([...fruits, "Mango"])}>
        Add Mango
      </button>
    </div>
  );
}

export default ReconciliationExample;

🔹 What’s happening here?

1. When count changes →
   • React does not re-render the entire <button>.
   • It only updates the text inside button.
2. When new fruit is added →
   • React compares old list with new list.
   • Finds only one change ("Mango") → updates that in the DOM.

---

🔹 Difference Between Diffing & Reconciliation

• Diffing Algorithm → The comparison step (how React finds changes).
• Reconciliation → The whole process (comparison + updating real DOM).