Batch Updating in React

React is a most popular JavaScript framework created by Facebook for building UI components. This framework is used for Web Development, Mobile App Development and Desktop App Development.

Components

React is a component based framework that manages their own state and can be composed to make complex UIs. The component logic is purely written in JavaScript. Following is an example of a Header component.

import React from 'react'; 

const Header = () => {
    return (
        <header>
            <h1>Brand Name</h1>
        </header>
    )
}

export default Header; 

Stateful Components

Components can also maintain internal state data accessed using this.state and any change in component's state would lead to invoking the render() function again. This change in component's internal data is facilitated through this.setState() function.
Consider the following example of a stateful component:

export default class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            clickCount: 0
        };
    }

    handleClick = () => {
        let {clickCount} = this.state; 

        this.setState({clickCount: clickCount + 1}); 
    }

    render() {
        return (
            <>
                <button onClick={this.handleClick}>Click Me</button>
                <p>You clicked me {this.state.clickCount} times.</p>
            </>
        );
    }
}

Every time I click on the button, it'll activate the onClick event listener which will internally call this.setState() to update internal state data and then render it on the page.

Batch Updating

With every update in component's state, render() method was called to render the updated component on the page which led to a decline in performance of React applications. Therefore in order to improve the performance, React introduced the mechanism of Batch Updating.

React uses batching to group state updates within event handlers and inbuilt hooks. It prevents components from re-rendering for each state update and improves application performance. So no matter how many state updates occur, React will batch them together and would re-render only once.

Consider the following example containing separate state change:-

export default class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            clickCount: 0, 
            decrement: 0
        };
    }

    handleClick = () => {
        let {clickCount, decrement} = this.state; 

        this.setState({clickCount: clickCount + 1}); 

        this.setState({decrement: decrement - 1})
    }

    render() {
        console.log('Component Rendering'); 
        return (
            <>
                <button onClick={this.handleClick}>Click Me</button>
                <p>You clicked me {this.state.clickCount} times.</p>
            </>
        );
    }
}

Despite having two separate state changes, component was rendered only once. This is because of React 18's feature of Automatic Batching which will automatically group together batch updates regardless of where they originated from.

Conclusion

Although this feature won't matter much in a small size web application but as the size and complexity of the application grows, automatic batching would yield considerable improvement in performance of the application.