CODEWITHSUNDEEP
javascriptreactjs
adam-beck
adam-beck

Reputation: 6009

Calling setState in a loop only updates state 1 time

Is there a reason that calling setSate() in a loop would prevent it from updating the state multiple times?

I have a very basic jsbin that highlights the problem I am seeing. There are two buttons. One updates the state's counter by 1. The other calls the underlying function of One in a loop -- which seemingly would update the state multiple times.

I know of several solutions to this problem but I want to make sure that I am understanding the underlying mechanism here first. Why can't setState be called in a loop? Do I have it coded awkwardly that is preventing the desired effect?

Upvotes: 40

Views: 61530

Answers (10)

Mehedi Hasan
Mehedi Hasan

Reputation: 11

simply use this concept, this works for me:

const [dashboard, setDashboard] = useState([]);
const products = ['mobole','laptop','tv','bitcoin'];

const update_dashboard_with_loop = ()=>
    {
      let arr = []; //temporary array
      for (let i = 0; i < products.length; i++)
           {
              arr.push(products[i]);
           }
      setDashboard(arr);
    }
update_dashboard_with_loop();

Upvotes: 0

eggrat
eggrat

Reputation: 1

You can try this one using the previous value to increase the count.

function handleChange() {
    for (let i = 0; i < 5; i++) {
        setState(prev => {
            return prev + 1
        })
    }
}

Upvotes: 0

Rohit Kumar
Rohit Kumar

Reputation: 446

Actually setState() method is asynchronous. Instead you can achieve it like this

manyClicks() {
var i = 0;
for (i = 0; i < 100; i++) {
  //this.setState({clicks: this.state.clicks + 1}); instead of this
  this.setState((prevState,props)=>({
      clicks: ++prevState.clicks
   }))
   }
 }

Upvotes: 1

rossipedia
rossipedia

Reputation: 59437

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.

Upvotes: 46

Javar
Javar

Reputation: 131

You have to use something like that:

const MyComponent = () => {
  const [myState, setMyState] = useState([]);

  const handleSomething = (values) => {
    values.map((value) => {
      setMyState((oldValue) => [...oldValue, { key: value.dataWhatYouWant }]);
    }
  }

  return (<> Content... </>);
}

Upvotes: 11

YySs
YySs

Reputation: 1

I was having this issue when creating a feature to import items. Since the amount of the importing items could be huge, I need to provide feedback (like a progress bar) to the site user so that they know that they aren't sitting there and waiting for nothing.

As we know that we can't setState in a loop, I took a different approach by running the task recursively.

Here's a example code https://codesandbox.io/s/react-playground-forked-5rssb

Upvotes: 0

antkiewiczk
antkiewiczk

Reputation: 190

There's a nice way to update state in a loop. Just make an empty variable, set its value to the updated state, call setState(), and pass it this variable:

const updatedState = {};

if (vars.length) {
  vars.forEach(v => {
    updatedState[v] = '';
    this.setState({
      ...this.state
      ...updatedState,
    });
  });
}

Upvotes: 19

Yash Kalwani
Yash Kalwani

Reputation: 443

Basically setState is called asynchronously. It also has a callback function which you can utilise to do something once the state has been mutated. Also if multiple setStates are called one after the other they are batched together as written previously.

Upvotes: 1

Kartikeya Sharma
Kartikeya Sharma

Reputation: 553

I had the same problem. But tried with a little different approach.

iterateData(data){
  //data to render
   let copy=[];
   for(let i=0;<data.length;i++){
     copy.push(<SomeComp data=[i] />) 
    }
    this.setState({
      setComp:copy
    });
 }
 render(){
   return(
     <div>
       {this.state.setComp}
    </div>
   );
 }

I hope this helps.

Upvotes: 5

Garett Entreri
Garett Entreri

Reputation: 1

I was able to make your code work, calling setState in the loop by doing the following: 

 manyClicks() {
   for (i = 0; i < 100; i++) {
     this.setState({clicks: this.state.clicks += 1})
   }
 }
enter code here

Hopefully this helps!

Upvotes: -8

Related Questions