When waiting for an async action to end, and in the meantime the state changes, there is no way to know about the change

[shaibam]

React version:
16.13

Steps To Reproduce

1. create a functional component with 2 elements
2. the component will have an Integer - counter prop and is initialised with 0 value.
3. the first element has an "onClick" action, which increases the counter.
4. the second element has an "onClick" action, which is asynced and waits for a timeout promise and only then increases the counter.
5. press the second element, and while waiting for the async action to complete press the firs element as well.

import React, { useState } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);
  return (
    <div className="App">
      <div>
        <button
          onClick={async () => {
            await new Promise(resolve => {
              setTimeout(() => {
                resolve();
              }, 4000);
            });
             setCounter(counter + 1);
          }}
        >
          Async
        </button>
        <label>{counter}</label>
      </div>
      <div>
        <button
          onClick={() => {
            //increases the counter state
            setCounter(counter + 1);
          }}
        >
          Add 1
        </button>
        <label>{counter}</label>
      </div>
    </div>
  );
}

Link to code example:
https://codesandbox.io/s/red-bush-7w8yk?file=/src/App.js

-- A different version of the same issue
https://stackoverflow.com/questions/62424530/how-to-get-the-changed-state-after-an-async-action-using-react-functional-hooks

The current behavior

current behaviour: the counter value at the end of the async action will equal to 1

The expected behavior

expected behaviour: the counter value at the end of the async action will equal to 2

[dmytro-lymarenko]

Instead of using setCounter(counter + 1); use functional update of setCounter like this: setCounter(prevCounter => prevCounter + 1);. In this case prevCounter will contain the latest value. Look here

[bvaughn]

@dmytro-lymarenko suggested what I was going to suggest 😄 The simplest solution for async code is to use the updater function version of set-state.