How to prevent race conditions with react useState hook

Question

I have a component that uses hooks state (useState) api to track the data.

The object looks like this

const [data,setData] =  React.useState({})

Now I have multiple buttons which make API requests and set the data with the new key

setAPIData = (key,APIdata) => {

    const dup = {
      ...data,
      [key]:APIdata
    }
    setData(dup)
}

Now if I make multiple requests at the same time , it results in race conditions since setting state in react is asynchronous and I get the previous value.

In class-based components, we can pass an updater function to get the updated value, how to do this hooks based component.

Answer 1

You must use setData with a function as its argument. Then it will always get the previous state, no matter what order it will be called.

const [data,setData] =  React.useState({})

setData(prevData => ({
  ...prevData,
  [key]: APIdata
}));

Documentation: somewhat hidden in hook api reference. reactjs.org/docs/hooks-reference.html#functional-updates