How to solve Race condition in setting React state?

Question

I have component that have state as object

const [data, setData] = useState({
  input, 
  output: '', 
  enableCopyToClipboard: true,
}

When listen to Observable I do following:

  // reset state before loading stream
  setData({ 
    ...data, 
    output: '',
    enableCopyToClipboard: false,
  });

  loadingStream(request).subscribe((response) => {
    resText.push(response.text);
    setData({ 
      ...data, 
      output: resText.join(''), 
    });
  });

Problem is my enableCopyToClipboard variable in state stays true when it should be false while streaming is ongoing. No idea why.

RubenSmn · Accepted Answer · 2023-05-01 19:20:14Z

1

You can use the callback function to set the new data. So you'll always have the most up to date version of the state. This prevents the override of the old version of the state.

// reset state before loading stream
setData((prevData) => ({
  ...data,
  output: "",
  enableCopyToClipboard: false,
}));

loadingStream(request).subscribe((response) => {
  resText.push(response.text);
  setData((prevData) => ({
    ...prevData,
    output: resText.join(""),
  }));
});

You could also set the enableCopyToClipboard to false by default on the subscribe.

loadingStream(request).subscribe((response) => {
  resText.push(response.text);
  setData((prevData) => ({
    ...prevData,
    enableCopyToClipboard: false,
    output: resText.join(""),
  }));
});

answered May 1, 2023 at 19:20

RubenSmn

4,7622 gold badges12 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David · Accepted Answer · 2023-05-01 19:19:40Z

Multiple state updates in the same render, as well as state updates within a closure, can cause this problem. An often recommended approach is to use the callback version of state updates. For example:

setData(d => ({ 
  ...d, 
  output: '',
  enableCopyToClipboard: false,
}});

loadingStream(request).subscribe((response) => {
  resText.push(response.text);
  setData(d => ({ 
    ...d, 
    output: resText.join(''), 
  }));
});

In the case of state updates within a closure, the difference here is that the data variable isn't being captured by that closure and there's no dependency on it. In the case of batched state updates, the difference here is that the callback uses the current state in the batch sequence rather than the state at the time of rendering.

Collectives™ on Stack Overflow

How to solve Race condition in setting React state?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related