FrontendAdvanced

React 19 & Reconciliation Internals

React is a declarative UI library built around state-driven reconciliation, Fiber work loops, and concurrency.

Key Mental Models & Invariants

-Reconciliation diffs Virtual DOM trees using key heuristics (O(n) instead of O(n^3)).
-Fiber is a data structure representing a unit of work with child, sibling, and return pointers.
-React 19 Server Components render on the server with zero client bundle impact.
-Hooks rely on ordered linked lists stored on the component's Fiber node.

Deep Dive Architecture

### The Fiber Architecture Before Fiber (React 15), React used a synchronous recursive call stack that could not be paused, causing jank on complex renders. Fiber re-implemented the call stack as a virtual singly linked list: - Each Fiber node contains: `type`, `key`, `stateNode`, `child`, `sibling`, `return`, `memoizedState`. - React runs in two phases: 1. **Render phase** (Asynchronous, interruptible): builds work-in-progress fiber tree. 2. **Commit phase** (Synchronous, uninterruptible): applies DOM mutations.

Code Exampletsx

import { useActionState, useOptimistic } from "react";

export function TodoItem({ todo, onUpdate }: { todo: Todo; onUpdate: (t: Todo) => Promise<void> }) {
  const [optimisticTodo, setOptimistic] = useOptimistic(
    todo,
    (state, update: Partial<Todo>) => ({ ...state, ...update })
  );

  const [state, formAction, isPending] = useActionState(async (prevState: any, formData: FormData) => {
    setOptimistic({ completed: true });
    await onUpdate({ ...todo, completed: true });
  }, null);

  return (
    <form action={formAction}>
      <span className={optimisticTodo.completed ? "line-through text-ink-faint" : ""}>
        {optimisticTodo.title}
      </span>
      <button disabled={isPending} className="btn-paper">Complete</button>
    </form>
  );
}

React 19 `useOptimistic` provides instant UI feedback before the server action settles.