Reconciliation & Virtual DOM

// ❌ Direct DOM manipulation — each call triggers layout/paint
const list = document.getElementById("list");

// 1000 individual DOM operations = 1000 potential reflows
for (let i = 0; i < 1000; i++) {
  const li = document.createElement("li");
  li.textContent = `Item ${i}`;
  list.appendChild(li);  // Triggers reflow each time
}

// ✅ What React does internally:
// 1. Build the entire new UI in memory (Virtual DOM)
// 2. Diff against the previous Virtual DOM
// 3. Batch all changes into ONE DOM update
// Result: minimal reflows, smooth UI

// This JSX:
<div className="card">
  <h2>Title</h2>
  <p>Description</p>
</div>

// Becomes this Virtual DOM object (simplified):
{
  type: "div",
  props: {
    className: "card",
    children: [
      {
        type: "h2",
        props: { children: "Title" }
      },
      {
        type: "p",
        props: { children: "Description" }
      }
    ]
  }
}

// React.createElement() is what JSX compiles to:
React.createElement("div", { className: "card" },
  React.createElement("h2", null, "Title"),
  React.createElement("p", null, "Description")
);

// A real DOM node has ~250+ properties
const div = document.createElement("div");
console.log(Object.keys(div).length); // ~250 properties!

// A Virtual DOM node is just a plain object
const vNode = {
  type: "div",
  props: { className: "card" },
  children: []
};
// ~3 properties. Creating and comparing these is trivial.

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

  // When setCount is called:
  // 1. React schedules a re-render
  // 2. Calls Counter() again → new Virtual DOM
  // 3. Diffs new VDOM with previous VDOM
  // 4. Finds: <span> text changed from "0" to "1"
  // 5. Updates ONLY that text node in the real DOM

  return (
    <div>
      <h1>Counter</h1>           {/* unchanged — skipped */}
      <span>{count}</span>       {/* changed — updated */}
      <button onClick={() => setCount(count + 1)}>
        Increment                {/* unchanged — skipped */}
      </button>
    </div>
  );
}

// CASE 1: Same element type → update props only
// Old:
<div className="old" title="hello" />
// New:
<div className="new" title="hello" />
// React: keeps the same DOM node, only updates className

// CASE 2: Different element type → destroy and rebuild
// Old:
<div>
  <Counter />
</div>
// New:
<span>
  <Counter />
</span>
// React: destroys <div> and <Counter> entirely
//        (including Counter's state!)
//        builds new <span> and new <Counter> from scratch

// CASE 3: Different component type → destroy and rebuild
// Old:
<ComponentA data={items} />
// New:
<ComponentB data={items} />
// React: unmounts ComponentA, mounts ComponentB
//        even if they render identical output

// Old Virtual DOM:
{
  type: "div",
  props: { className: "card", style: { color: "red" }, id: "main" }
}

// New Virtual DOM:
{
  type: "div",
  props: { className: "card active", style: { color: "blue" }, id: "main" }
}

// React's diff result:
// - className: "card" → "card active"     ← CHANGED, update
// - style.color: "red" → "blue"           ← CHANGED, update
// - id: "main" → "main"                   ← SAME, skip
//
// DOM operation: element.className = "card active"
//                element.style.color = "blue"

// WITHOUT keys — React compares by position (index)

// Old:                    New:
<ul>                       <ul>
  <li>Apple</li>    →       <li>Cherry</li>   // position 0: text changed
  <li>Banana</li>   →       <li>Apple</li>    // position 1: text changed
</ul>                        <li>Banana</li>   // position 2: NEW node
                           </ul>

// React updates ALL three <li> elements
// Even though Apple and Banana just moved!

// WITH keys — React matches by identity
// Old:                         New:
<ul>                            <ul>
  <li key="a">Apple</li>  →      <li key="c">Cherry</li>  // NEW
  <li key="b">Banana</li> →      <li key="a">Apple</li>   // MOVED
</ul>                             <li key="b">Banana</li>  // MOVED
                                </ul>

// React: insert Cherry, move Apple and Banana
// Existing DOM nodes are reused — much more efficient

function diff(oldNode, newNode) {
  // 1. Type changed → replace entire subtree
  if (oldNode.type !== newNode.type) {
    return { type: "REPLACE", newNode };
  }

  // 2. Same type → compare props
  const propChanges = diffProps(oldNode.props, newNode.props);

  // 3. Recursively diff children
  const childChanges = diffChildren(
    oldNode.children,
    newNode.children
  );

  return { type: "UPDATE", propChanges, childChanges };
}

function diffChildren(oldChildren, newChildren) {
  // With keys: match by key, detect moves/inserts/deletes
  // Without keys: compare by index position only
}

// ❌ WITHOUT keys — React compares by index

// Render 1: items = ["Alice", "Bob", "Charlie"]
<ul>
  <li>Alice</li>     {/* index 0 */}
  <li>Bob</li>       {/* index 1 */}
  <li>Charlie</li>   {/* index 2 */}
</ul>

// Render 2: items = ["Zara", "Alice", "Bob", "Charlie"]
// (Zara added at the beginning)
<ul>
  <li>Zara</li>      {/* index 0: was "Alice" → text changed */}
  <li>Alice</li>     {/* index 1: was "Bob" → text changed */}
  <li>Bob</li>       {/* index 2: was "Charlie" → text changed */}
  <li>Charlie</li>   {/* index 3: NEW node created */}
</ul>

// React updates ALL 4 elements!
// It doesn't know Alice/Bob/Charlie just shifted down.
// If these <li> had internal state (inputs, checkboxes),
// that state would be WRONG — attached to the wrong items.

// ✅ WITH keys — React matches by identity

// Render 1:
<ul>
  <li key="alice">Alice</li>
  <li key="bob">Bob</li>
  <li key="charlie">Charlie</li>
</ul>

// Render 2: (Zara added at the beginning)
<ul>
  <li key="zara">Zara</li>        {/* NEW — insert */}
  <li key="alice">Alice</li>      {/* SAME key — reuse, no update */}
  <li key="bob">Bob</li>          {/* SAME key — reuse, no update */}
  <li key="charlie">Charlie</li>  {/* SAME key — reuse, no update */}
</ul>

// React: creates ONE new <li> for Zara, moves the rest.
// Existing DOM nodes and their state are preserved.

// ❌ Bug: Using index as key with stateful components

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: "Buy milk" },
    { id: 2, text: "Walk dog" },
    { id: 3, text: "Code review" },
  ]);

  const removeTodo = (id) => {
    setTodos(todos.filter(t => t.id !== id));
  };

  return (
    <ul>
      {todos.map((todo, index) => (
        // ❌ Using index as key
        <li key={index}>
          <input defaultValue={todo.text} />
          <button onClick={() => removeTodo(todo.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

// Problem: Delete "Buy milk" (index 0)
// Before: [0: "Buy milk", 1: "Walk dog", 2: "Code review"]
// After:  [0: "Walk dog", 1: "Code review"]
//
// React sees: key 0 text changed, key 1 text changed, key 2 removed
// The INPUT VALUES stay attached to their index positions!
// Result: "Walk dog" row shows "Buy milk" in the input 😱

// ✅ Fix: Use unique ID as key
// <li key={todo.id}> — React correctly removes the right element

setState(newValue)
    │
    ▼
┌──────────────────────────────────┐
│         RENDER PHASE             │
│   (pure, can be paused/aborted) │
│                                  │
│   1. Call component function     │
│   2. Build new Virtual DOM tree  │
│   3. Diff old VDOM vs new VDOM   │
│   4. Collect list of changes     │
│                                  │
│   No side effects here!          │
└──────────────┬───────────────────┘
               │
               ▼
┌──────────────────────────────────┐
│         COMMIT PHASE             │
│   (synchronous, can't pause)    │
│                                  │
│   5. Apply DOM mutations         │
│      - Insert new nodes          │
│      - Update changed props      │
│      - Remove deleted nodes      │
│                                  │
│   6. Run layout effects          │
│   7. Browser paints              │
│   8. Run passive effects         │
│      (useEffect callbacks)       │
└──────────────────────────────────┘

function Profile({ user }) {
  const [isEditing, setIsEditing] = useState(false);

  return (
    <div className="profile">
      <h1>{user.name}</h1>
      {isEditing ? (
        <input defaultValue={user.bio} />
      ) : (
        <p>{user.bio}</p>
      )}
      <button onClick={() => setIsEditing(!isEditing)}>
        {isEditing ? "Save" : "Edit"}
      </button>
    </div>
  );
}

// When setIsEditing(true) is called:
//
// Old VDOM:                    New VDOM:
// <div>                        <div>
//   <h1>John</h1>               <h1>John</h1>        ← same, skip
//   <p>Developer</p>            <input value="..."/>  ← TYPE CHANGED!
//   <button>Edit</button>       <button>Save</button> ← text changed
// </div>                       </div>
//
// React's diff:
// 1. <div> — same type, check children
// 2. <h1> — same type, same props → SKIP
// 3. <p> → <input> — DIFFERENT type → destroy <p>, create <input>
// 4. <button> — same type, text changed → update text node
//
// DOM operations: remove <p>, insert <input>, update button text

function TaskList() {
  const [tasks, setTasks] = useState(["Design", "Develop", "Test"]);

  const addTask = () => {
    setTasks(["Plan", ...tasks]); // Add to beginning
  };

  return (
    <ul>
      {tasks.map((task, index) => (
        // ❌ No key (React uses index by default)
        <li>{task} <input placeholder="notes" /></li>
      ))}
    </ul>
  );
}

// Before addTask():
// index 0: <li>Design  <input /></li>  (user typed "mockups" in input)
// index 1: <li>Develop  <input /></li>
// index 2: <li>Test     <input /></li>

// After addTask() — React compares by index:
// index 0: "Design" → "Plan"     ← UPDATE text (input stays!)
// index 1: "Develop" → "Design"  ← UPDATE text (input stays!)
// index 2: "Test" → "Develop"    ← UPDATE text
// index 3: (new) → "Test"        ← CREATE new <li>

// BUG: The input with "mockups" is still at index 0,
// but now it's next to "Plan" instead of "Design"!
// React updated 4 DOM nodes instead of inserting 1.

function TaskList() {
  const [tasks, setTasks] = useState([
    { id: "t1", name: "Design" },
    { id: "t2", name: "Develop" },
    { id: "t3", name: "Test" },
  ]);

  const addTask = () => {
    setTasks([{ id: "t0", name: "Plan" }, ...tasks]);
  };

  return (
    <ul>
      {tasks.map((task) => (
        // ✅ Unique, stable key
        <li key={task.id}>
          {task.name} <input placeholder="notes" />
        </li>
      ))}
    </ul>
  );
}

// Before addTask():
// key="t1": <li>Design  <input /></li>  (user typed "mockups")
// key="t2": <li>Develop  <input /></li>
// key="t3": <li>Test     <input /></li>

// After addTask() — React matches by key:
// key="t0": (no match) → CREATE new <li>Plan</li>
// key="t1": matched    → REUSE, no changes needed
// key="t2": matched    → REUSE, no changes needed
// key="t3": matched    → REUSE, no changes needed

// Result: 1 DOM insertion. Input with "mockups" stays with Design.
// 4x fewer DOM operations. State is preserved correctly.

// Simplified Fiber node structure
const fiber = {
  // Identity
  type: "div",           // Element type (string or component)
  key: null,             // Key for reconciliation

  // Tree structure (linked list, not recursive tree)
  child: fiberChild,     // First child fiber
  sibling: fiberSibling, // Next sibling fiber
  return: fiberParent,   // Parent fiber

  // State
  stateNode: domNode,    // Reference to real DOM node
  memoizedProps: {},     // Props from last render
  memoizedState: {},     // State from last render
  pendingProps: {},      // New props for this render

  // Effects
  effectTag: "UPDATE",   // What to do in commit phase
  // "PLACEMENT" | "UPDATE" | "DELETION"

  // Work scheduling
  lanes: 0b0001,         // Priority lanes (binary)
  alternate: oldFiber,   // Link to previous fiber (double buffering)
};

import { startTransition, useDeferredValue } from "react";

function SearchPage() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);

  // Urgent: update input immediately (user sees typing)
  // Non-urgent: update results list (can be interrupted)
  const handleChange = (e) => {
    setQuery(e.target.value);  // Urgent — renders immediately

    startTransition(() => {
      setResults(search(e.target.value));  // Non-urgent
      // React can interrupt this render if user types again
    });
  };

  // Alternative: useDeferredValue
  const deferredQuery = useDeferredValue(query);
  // deferredQuery lags behind query during rapid updates
  // React renders with the old value first (fast),
  // then re-renders with the new value in the background

  return (
    <>
      <input value={query} onChange={handleChange} />
      <ResultsList query={deferredQuery} />
    </>
  );
}