Calling Setstate in a Loop Only Updates State 1 Time

Calling setState in a loop only updates state 1 time

From the React Docs:

setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses.

Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.

setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall.

Basically, don't call setState in a loop. What's happening here is exactly what the docs are referring to: this.state is returning the previous value, as the pending state update has not been applied yet.

react setstate does not work properly on loops

Try using the Fat Arrow approach to set state as follows:

setLocalErrs(localErrs => ({ ...localErrs, [single.param]: single.msg }));

It avoids state loss in case setter function is called twice at the same time due to different async calls, etc.

What is the best way to update state inside a loop

Storing the data using ref(s) and updating the state at the end has solved the issue.

Updating state in a forEach loop in React is not working correctly

It is related to how React works. It waits for all setState calls for a specific state and picks the last one to update the DOM.

If you wanna avoid this behavior, use an updater function that will always get the freshest state, even if the component didn't render since. Like so:

ids.forEach((id) => {
  getData(id).then((data) => {
    if (data) {
      setDataList((dataList) => {
        let newDataList = new Map(dataList);
        newDataList.set(id, data);
        return newDataList;
      });
    }
  });
});

setState inside for loop does not update the state: React+Typescript

There are multiple issues in your code. First of all this.setState is asynchronous and therefore you can not say when it really is executed.

So if you call

this.setState({validated: false},() => {});

you can not rely that after that this.state.validated is false immediatly.

So after you call this.setState to make validated == false and then check:

if(this.state.validated)
{
  // some other operation 
  this.setState({validated: true},() => {});
}

It might be either true or false.

But in your code you're extracting validated (what you're using in the if-condition) at the beginning of your method. That means validated won't change when this.state changes.

You might want to use the callback you already added (() => {}) to perform some other action after the state changed or just use a normal valiable instead of something related to the state.

Like:

tmp = true;

for-loop {
  if(should not validate) {
    tmp = false;
    this.setState({validated: false});
    break;
  }

if(tmp) {
  this.setState({validated: true},() => {});
}

setState in a .map is giving an infinite refresh loop

set default selected in use effect

useEffect(() => {
    const selected = redisServers.servers[config.ENV].find(i => i.default)
    if(selected)
    setSelectedServer(selected.ip + ":" + selected.port)
}, [])

How to set state inside a loop with a time delay in react js

This is the issue, your array is referring to the same instance and does not re-render. Create a new array from temp array and set the state. It worked.

setArray([...temp])

---

Related Topics