How React manage state updates wrapped in async block

Question

In this code i expect when i clicked asycn change button to have output: num1: 6 num1: 7

as each state update in then() block so React does not batch the updates

but i got 2 lines: num1: 6

import React, { useState } from "react";
import { Button } from "react-bootstrap";
const Test = (props) => {
const [num1, setNum1] = useState(5);
const [num2, setNum2] = useState(6);

const syncClickHandler = () => {
 setNum1(num1 + 1);
 setNum1(num1 + 1);
};

console.log("num1 " + num1);

const asyncClickHandler = () => {
 Promise.resolve()
  .then(() => {
    setNum1(num1 + 1);
  })
  .then(() => {
    setNum1(num1 + 1);
  });
};
return (
 <div>
  num1: {num1} , num2: {num2} <br />
  <Button onClick={syncClickHandler}>sync change</Button>
  <Button onClick={asyncClickHandler}>async change</Button>
 </div>
 );
};
export default Test;

why i got this output

Why don't you do only one `setNum1` ? What is your use case? — HichamELBSI, Jan 17 '21 at 14:06
i am just trying to understand React state update in async function and in direct event handler — mohamed gamal, Jan 17 '21 at 14:13

Dennis Vash · Accepted Answer · 2021-01-17T13:52:42.217

2

React does not batch state updates in async code (yet v17, may change in future).

Moreover, you have closure on num1 value (num1 === 6), so the second setNum call won't trigger additional render (prev value 7 === curr value 7).

Try using functional updates and discard the closure:

const asyncClickHandler = () => {
  Promise.resolve()
    .then(() => {
      setNum((prev) => prev + 1);
    })
    .then(() => {
      setNum((prev) => prev + 1);
    });
};

A full example, notice the number of logs, sync set state are batched and async aren't.

const Test = () => {
  const [num, setNum] = useState(0);

  const syncClickHandler = () => {
    setNum((prev) => prev + 1);
    setNum((prev) => prev + 1);
  };

  const asyncClickHandler = () => {
    Promise.resolve()
      .then(() => {
        setNum((prev) => prev + 1);
      })
      .then(() => {
        setNum((prev) => prev + 1);
      });
  };

  console.log("num " + num);

  return (
    <div>
      num1: {num} <br />
      <button onClick={syncClickHandler}>sync change</button>
      <button onClick={asyncClickHandler}>async change</button>
    </div>
  );
};

edited Jan 17 '21 at 13:52

answered Jan 17 '21 at 13:45

Dennis Vash

50,196
9
100
118

ok i know that will be fine , but i am wondering why this is not working as i used async wrapper for each state update and react will not batch these 2 updates – mohamed gamal Jan 17 '21 at 13:48
React does not batch promises. See https://stackoverflow.com/questions/53048495/does-react-batch-state-update-functions-when-using-hooks – Dennis Vash Jan 17 '21 at 13:50
i know that react does not batch promises, so why i did not get the expected result, as i think after resolving promise react will do the first then block that update state and after that update the state in the second then block – mohamed gamal Jan 17 '21 at 13:57
Ok and what is the problem then? – Dennis Vash Jan 17 '21 at 14:00
yes i ask why i did not get the expected result as i thought – mohamed gamal Jan 17 '21 at 14:01
But you do get the expected results, log of 6, then button press 7 and 8, you have two setState – Dennis Vash Jan 17 '21 at 14:03
did you mean that closure is the reason not react state update, ok fine could you explain more about the closure – mohamed gamal Jan 17 '21 at 14:10
All relevant links are in the answer. You can read on closures from it. – Dennis Vash Jan 17 '21 at 14:16

How React manage state updates wrapped in async block

1 Answers1