Reconciliation Process — Complete Guide

class SimpleFramework {
    constructor(rootComponent, container) {
        this._rootComponent = rootComponent;
        this._container = container;
        this._oldVTree = null;
        this._pendingState = null;
        this._isDirty = false;
    }

    // Called when state changes
    setState(updater) {
        // 1. Schedule update (batching)
        this._pendingState = updater;
        if (!this._isDirty) {
            this._isDirty = true;
            // Use microtask for batching
            Promise.resolve().then(() => this._reconcile());
        }
    }

    _reconcile() {
        // 2. Render phase: build new virtual tree
        const newVTree = this._rootComponent.render();

        // 3. Diff phase: compare with old tree
        if (this._oldVTree) {
            this._patches = this._diff(this._oldVTree, newVTree);
        }

        // 4. Commit phase: apply patches to real DOM
        if (this._patches) {
            this._commit(this._container, this._patches);
        }

        this._oldVTree = newVTree;
        this._isDirty = false;
    }

    _diff(oldNode, newNode) {
        // Simplified diff logic
        if (!oldNode) return { type: 'CREATE', node: newNode };
        if (!newNode) return { type: 'DELETE' };
        if (oldNode.type !== newNode.type) return { type: 'REPLACE', node: newNode };
        // ... prop and child diffing
    }

    _commit(parent, patches) {
        // Apply patches to the real DOM
        // This is called the "commit phase"
    }
}

// Render phase (can be interrupted)
function renderPhase(component) {
    // Build virtual tree
    const vnode = component.render();

    // Diff with previous
    const patches = diff(previousVnode, vnode);

    // If the render is interrupted (e.g., higher priority update),
    // the patches are discarded and reconciliation restarts
    return patches;
}

// Commit phase (synchronous, cannot be interrupted)
function commitPhase(domNode, patches) {
    // All DOM mutations happen here
    // This must complete without interruption
    patches.forEach(patch => {
        applyPatch(domNode, patch);
    });
    // After commit, the browser sees the final DOM state
}

// Without keys: positional matching
// Old: [A, B, C, D]
// New: [B, C, D, E]
// Positional diff would replace A->B, B->C, C->D, D->E
// Result: 4 mutations

// With keys:
// Old: [{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}]
// New: [{key: 'b'}, {key: 'c'}, {key: 'd'}, {key: 'e'}]
// Keyed diff matches b->b, c->c, d->d, removes a, adds e
// Result: 2 mutations (remove a, add e)

function keyedReconciliation(oldChildren, newChildren) {
    const oldMap = new Map();
    oldChildren.forEach((child, index) => {
        oldMap.set(child.key, { node: child, index });
    });

    const operations = [];
    let lastPlacedIndex = -1;

    newChildren.forEach((newChild, newIndex) => {
        const oldEntry = oldMap.get(newChild.key);

        if (!oldEntry) {
            // New item
            operations.push({ type: 'ADD', node: newChild, index: newIndex });
        } else {
            // Existing item
            if (oldEntry.index < lastPlacedIndex) {
                // Item moved down — need to move it
                operations.push({ type: 'MOVE', node: oldEntry.node, from: oldEntry.index, to: newIndex });
            }
            lastPlacedIndex = Math.max(lastPlacedIndex, oldEntry.index);
            oldMap.delete(newChild.key);
        }
    });

    // Remaining items in oldMap are deleted
    oldMap.forEach((entry) => {
        operations.push({ type: 'REMOVE', node: entry.node, index: entry.index });
    });

    return operations;
}

function reconcileComponent(parentComponent, newState) {
    // 1. Update component state
    parentComponent.state = { ...parentComponent.state, ...newState };

    // 2. Recurse into children
    const children = parentComponent.renderChildren();
    children.forEach((child, index) => {
        const oldChild = parentComponent._previousChildren[index];

        if (child.type === 'component') {
            // Recursively reconcile child components
            reconcileComponent(
                oldChild?.component || createChildComponent(child),
                child.props
            );
        } else {
            // Reconcile DOM elements directly
            reconcileDOM(oldChild, child);
        }
    });

    // 3. Generate patches for this level
    return generatePatches(parentComponent);
}

// Each component manages its own reconciliation loop.
// This creates a tree of reconciliation operations.