Batch Updating in React
Tags: react, javascript
Published: 2022-09-01 01:18:41

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. 

```js
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: 

```js
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>
            </>
        );
    }
}
```

![Code Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19juqs0hlyi5fvos21ug.gif)

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:-

```js
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>
            </>
        );
    }
}
```

![Code Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pl5q6r8l3fx4mx79xj3a.png)

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.