This is the 21st day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Translate: beta.reactjs.org/learn/queue…

Setting the value of state causes another Render queue. But sometimes you may want to perform multiple operations on the value before executing the next Render queue. To do so, this article helps you understand how React updates status in batches.

You will learn:

  • What is “batching” and how does React handle multiple state updates
  • How do I apply several updates to the same state in one line

series

This is a series of articles that I hope you can read from the beginning, because the examples will be sequential

  • React State update queue – How to batch state update in event handler

Update the same state several times before the next render

React is like a waiter in a restaurant. It waits for all the code in the event handler to run before it processes state updates. If setNumber(number + 1) is executed multiple times in an event handler, it will only take effect once. It’s like we told the waiter three times in the restaurant, I want the shredded pork with fish flavor.

This is an unusual use case, but if you want to update the same state variable multiple times before the next render, instead of passing the next state value like setNumber(number + 1), you can pass a function that computes the next state based on the previous state in the queue. Like setNumber(n => n + 1), this is a way of telling React to “do something with the state value” instead of just replacing it.

Now let’s make some changes to the example from the previous article and try to increase the counter:

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={()= >{ setNumber(n => n + 1); setNumber(n => n + 1); setNumber(n => n + 1); }} > + 3</button>
    </>)}Copy the code

You’ll notice that by clicking the button, you can increase by 3 at a time.

Here, n => n + 1 is called the updater function. When you pass it to the setter for state:

  • React queues this function for processing after all the other code in the event handler has run.
  • During the next render, React walks through the queue and gives you the final update status.
setNumber(n= > n + 1);
setNumber(n= > n + 1);
setNumber(n= > n + 1);
Copy the code

Here’s how React works when executing the event handler:

  • setNumber (n => n + 1): n => n + 1Phi is a function. React adds it to the queue.
  • setNumber (n => n + 1): n => n + 1Phi is a function. React adds it to the queue.
  • setNumber (n => n + 1): n => n + 1Phi is a function. React adds it to the queue.

When you call useState during the next render, React will traverse the queue. The previous numeric state was 0, so React passes it as an n argument to the first updater function. React then passes the return value of your previous updater function to the next updater as n, and so on:

Update the queue n The return value
n => n + 1 0 0 plus 1 is 1
n => n + 1 1 1 plus 1 is 2
n => n + 1 2 2 plus 1 is 3

React stores 3 as the final result and returns it from useState.

This is why clicking “+3” in the above example correctly increases the value by 3.