React Reconciliation & Fiber

Reconciliation is the process through which React updates the DOM. When a component's state changes, React creates a new tree of elements and compares it with the previous one.

The Diffing Algorithm

React uses a heuristic O(n) algorithm based on two assumptions:

1. Two elements of different types will produce different trees.
2. The developer can hint at which child elements may be stable across different renders with a key prop.

React Fiber

Fiber is the reconciliation engine in React 16. Its main goal is to enable incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.

// Fiber Node Structure (simplified)
{
    type: 'div',
    key: null,
    child: FiberNode,
    sibling: FiberNode,
    return: FiberNode, // Parent
    pendingProps: {...},
    memoizedState: {...}
}