Batching state updates
In this section, you'll learn about how React can batch state updates together in order to prevent unnecessary rendering when multiple state changes happen at the same time. In particular, we'll look at the changes introduced in React 18 that make automatic batching of state updates commonplace.
When your React component issues a state change, this causes the React internals to re-render the parts of your component that have changed visually as a result of this state update. For example, imagine you have a component with a name state that's rendered inside of a <span>
element and you change the name state from Adam
to Ashley
. That's a straightforward change that results in a re-render that's too fast for the user to even notice. Unfortunately, state updates in web applications are rarely this straightforward. Instead, there might be dozens of state changes in 10 milliseconds. For example, the name state might follow changes like...