Understanding React Fiber Architecture and Diff Algorithm in React 16

React 15 architecture uses a two‑layer Reconciler and Renderer, where the Reconciler recursively creates a virtual DOM, causing blocking updates for deep trees.

React 16 replaces this with the Fiber architecture, turning the recursive update into an interruptible asynchronous process, adding a Scheduler and representing the virtual DOM as a linked‑list of Fiber nodes.

Fiber nodes contain properties such as type , key , stateNode , return , sibling , child and flags (Placement = 5, Deletion = 8, Update = 4).

Example function component and its Fiber tree:

function App() {
    return (
贝壳
大前端
);
}

The corresponding Fiber tree links the nodes via return , sibling and child pointers, forming the virtual DOM.

The React Diff algorithm compares the current Fiber tree with the new JSX tree to produce a work‑in‑progress Fiber tree. It performs two passes: the first pass handles updates, the second pass handles moves, insertions and deletions.

Single‑node diff is handled by reconcileSingleElement :

function reconcileSingleElement(returnFiber, currentFirstChild, element) {
    const key = element.key;
    let child = currentFirstChild;
    while (child !== null) {
        if (child.key === key) {
            if (child.elementType === element.type) {
                return existing;
            }
            break;
        } else {
            deleteChild(returnFiber, child);
        }
        child = child.sibling;
    }
    // create new Fiber …
}

Multi‑node diff is implemented in reconcileChildrenArray , which first iterates over matching keys, then creates new fibers for remaining new children, and finally processes a second pass using a map of remaining old fibers to handle moves.

function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren, lanes) {
    // first pass – matching keys
    // …
    // second pass – map remaining old fibers
    const existingChildren = mapRemainingChildren(returnFiber, oldFiber);
    for (; newIdx < newChildren.length; newIdx++) {
        const newFiber = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], lanes);
        // placeChild, link fibers …
    }
    existingChildren.forEach(child => deleteChild(returnFiber, child));
    return resultingFirstChild;
}

Key and type checks allow React to reuse existing DOM nodes; mismatched keys trigger deletions and insertions, while unchanged keys with different positions are marked with the Placement flag.

The article also walks through a concrete example (A‑B‑C‑D → A‑D‑B‑E) illustrating how the two‑pass algorithm builds the new Fiber tree, moves nodes, creates new ones, and deletes obsolete ones.

Overall, Fiber enables interruptible, priority‑aware rendering, reducing UI jank compared with the blocking recursive updates of React 15.