Batch Updates and Batching — Complete Guide

// Without batching: 3 separate re-renders
class UnbatchedComponent {
    updateAll() {
        this.setState({ a: 1 });  // Triggers re-render 1
        this.setState({ b: 2 });  // Triggers re-render 2
        this.setState({ c: 3 });  // Triggers re-render 3
        // After 3 re-renders and 3 DOM updates, browser paints once
        // But the component was built 3 times unnecessarily
    }
}

// With batching: 1 re-render
class BatchedComponent {
    updateAll() {
        // All three setState calls are queued
        this.setState({ a: 1 });
        this.setState({ b: 2 });
        this.setState({ c: 3 });
        // At the end of the microtask, ONE re-render happens
        // Component built once, DOM updated once, paint once
    }
}

import React, { useState } from 'react';

function BatchedExample() {
    const [count, setCount] = useState(0);
    const [text, setText] = useState('');

    function handleClick() {
        // Inside event handler: BATCHED (React 18+)
        setCount(c => c + 1);        // Queued
        setCount(c => c + 1);        // Queued
        setCount(c => c + 1);        // Queued
        setText('updated');          // Queued
        // All four updates are batched into ONE re-render
        // count goes from 0 to 3 in a single render
    }

    function handleAsyncUpdate() {
        // Before React 18, setTimeout did NOT batch
        // In React 18+, setTimeout is also batched
        setTimeout(() => {
            setCount(c => c + 1);
            setText('async update');
            // React 18+: batched into one re-render
            // React 17: two separate re-renders
        }, 100);
    }

    return (
        <button onClick={handleClick}>
            {count} - {text}
        </button>
    );
}

class BatchingFramework {
    constructor() {
        this._batchQueue = new Set();
        this._isBatching = false;
        this._pendingCallback = null;
    }

    // Called by components when their state changes
    scheduleUpdate(component) {
        this._batchQueue.add(component);

        if (!this._isBatching) {
            this._isBatching = true;
            // Schedule batch processing at the end of current task
            this._pendingCallback = Promise.resolve().then(() => {
                this._flushBatch();
            });
        }
    }

    _flushBatch() {
        // Process all queued updates
        const components = Array.from(this._batchQueue);
        this._batchQueue.clear();
        this._isBatching = false;

        // Build new virtual trees for all dirty components
        const allPatches = [];
        components.forEach(component => {
            const newTree = component.render();
            const oldTree = component._vdom;
            const patches = this._diff(oldTree, newTree);
            allPatches.push({ component, patches });
            component._vdom = newTree;
        });

        // Apply all patches in a single batch
        // The browser will see all DOM changes at once
        allPatches.forEach(({ component, patches }) => {
            this._commit(component.container, patches);
        });

        // After this microtask, the browser paints
        // All DOM changes are visible in a single frame
    }

    _diff(oldTree, newTree) {
        // Simplified implementation
        if (!oldTree) return { type: 'CREATE', node: newTree };
        if (!newTree) return { type: 'DELETE' };
        if (oldTree.type !== newTree.type) return { type: 'REPLACE', node: newTree };
        return { type: 'UPDATE', props: this._diffProps(oldTree.props, newTree.props), children: this._diffChildren(oldTree.children, newTree.children) };
    }

    _commit(container, patches) {
        // Apply patches to the DOM
        // All mutations happen synchronously here
    }
}

// Synchronous batching (Vue 3):
// Updates are queued and flushed in the next microtask
// This ensures the DOM update happens asynchronously

// Vue uses a nextTick-based approach:
const queue = [];
let isFlushing = false;

function queueJob(job) {
    if (!queue.includes(job)) {
        queue.push(job);
    }
    if (!isFlushing) {
        isFlushing = true;
        nextTick(flushJobs);
    }
}

function flushJobs() {
    // Sort jobs by component depth (parent before child)
    queue.sort((a, b) => a.id - b.id);
    const copy = queue.slice();
    queue.length = 0;

    for (const job of copy) {
        job();  // Execute each job synchronously
    }
    isFlushing = false;
}

// React 18 uses automatic batching:
// All updates within the same event handler,
// timeout, promise, or native event are batched.
// This is always asynchronous (deferred to microtask).

import { flushSync } from 'react-dom';

function SyncUpdates() {
    const [count, setCount] = useState(0);
    const [flag, setFlag] = useState(false);

    function handleSyncClick() {
        // Force synchronous, unbatched update
        flushSync(() => {
            setCount(c => c + 1);
        });
        // DOM is updated here. count element shows new value.
        // Browser may have already recalculated styles.

        // This second update is also synchronous
        flushSync(() => {
            setFlag(f => !f);
        });
        // DOM is updated again. Two separate renders, two paints.
    }

    return <button onClick={handleSyncClick}>{count}</button>;
}