I'm trying to call setState asynchronous in a callback, the issue is that by the time my function calls setState, the state was updated by another event that happened. Is there a way to query the current state from a nested callback?

Here's a simple demo that showcases what I'm running into:

import React, { Component, useState } from 'react';
import { render } from 'react-dom';

function App() {
  const [state, setState] = useState({value: 0});
  const click = async () => {

    setTimeout(() => setState({value: state.value + 10}), 300);

    async function apiCall(state) {
      // fake it for now
      return new Promise((res) => {
        setTimeout(() => {
          // !!!Get the latest state here!!!
          res({value: state.value + 1});
        }, 1000)
      });
    }

    const newState = await apiCall(state);
    setState(newState);
  }
  return (
    <div>
      Value: {state.value}
      <button onClick={click}>Update</button>
    </div>
  );
}

render(<App />, document.getElementById('root'));

I'm trying to call setState asynchronous in a callback, the issue is that by the time my function calls setState, the state was updated by another event that happened. Is there a way to query the current state from a nested callback?

Here's a simple demo that showcases what I'm running into:

https://stackblitz./edit/react-uybyyn

import React, { Component, useState } from 'react';
import { render } from 'react-dom';

function App() {
  const [state, setState] = useState({value: 0});
  const click = async () => {

    setTimeout(() => setState({value: state.value + 10}), 300);

    async function apiCall(state) {
      // fake it for now
      return new Promise((res) => {
        setTimeout(() => {
          // !!!Get the latest state here!!!
          res({value: state.value + 1});
        }, 1000)
      });
    }

    const newState = await apiCall(state);
    setState(newState);
  }
  return (
    <div>
      Value: {state.value}
      <button onClick={click}>Update</button>
    </div>
  );
}

render(<App />, document.getElementById('root'));

• javascript
• reactjs
• react-hooks

1 Answer 1

useState has a function updater form. You can use that to get the latest state value before updating.

const [val ,setVal] = React.useState(initVal);

const obj = { str: 'Hello' };

// Merge state form —
seVal(obj);

// Function updater form —
seVal(prevState => {
  // Object.assign would also work
  return {...prevState, ...{ str: prevState.str + ' World' }};
});

So your example would bee

setTimeout(() => setState(prevState => ({value: prevState.value + 10})), 300);

Ref to docs — hooks-reference.html#functional-updates

I have also updated your codesandbox to get it to work with ments. codesandbox