setState in while loop causing "Too many re-renders. React limits the number of renders to prevent an infinite loop"

I am trying to calculate countDiff and add the object to the record array countDiff times. For example, if countDiff value is two then I would like to add two same objects with incremented tempRecordId.

However "Too many re-renders. React limits the number of renders to prevent an infinite loop" error came up. Do you know any way to setState in a loop or the way to figure out this logic?

      const countDiff = homeRecordCount - awayRecordCount;

      let i = 0;
      let insertTeamId = countDiff > 0 ? awayTeamId : homeTeamId;

      if (countDiff != 0)
      {
        while(countDiff != i)
        {
          setTempRecordId(tempRecordId + 1);
          addRowToRecord({scoreMemberName:null, scoreMemberId: null, scoreTeamId: insertTeamId, assistMemberName: null, assistMemberId: null, matchId: matchId, codeId: 7, id: 0, tempRecordId: tempRecordId })
      i++;
    }
}

You shouldn't use conditionals nor loops in your Hook component. https://reactjs.org/docs/hooks-rules.html

In this case you could just add all the records at once.

Calling setState in render causes infinite loop � Issue #5591 , Here's what will cause an infinite loop, assuming you're not doing any state change checks: setState inside componentWillUpdate; setState� Here's what will cause an infinite loop, assuming you're not doing any state change checks: setState inside componentWillUpdate; setState inside componentDidUpdate; setState inside render (this is usually accidental) setState inside getSnapshotBeforeUpdate; Make sure you're not doing any of the above and you shouldn't see an infinite loop.

The best way to handle this situation is to construct the final object you need before you ever set state in the first place ie move your set state to after the while loop.

setState hook causing infinite loop, not sure why! : reactjs, setState hook causing infinite loop, not sure why! it's been a while from I stopped to exercise with Algorithms => problems are different when you work on a� Using setState in React in the right way is very important. Data flows from top to bottom in the component tree. If we set the state in the top component, all the child components are re-rendered.

It means once you call to setState then it will render your page. your logic set to never ending loop . I guess All the time (countDiff != i = > true)comes to inside of the while loop. Please set your logic with some ending condition.

Setting state for parent from within useEffect hook in child , setState causes the parent to re-render because we are updating its inside child component, and this will inevitably cause an infinite loop. Calling setstate in a loop I'm trying to learn React by building a small app to generate random choices from a list. The onclick function for my randomizer button loops through 10 times of setState(), but yet it is only called once.

ReactJS — Alternative for issue with setState inside Loop, ReactJS — Alternative for issue with setState inside Loop of a single instance of the smart component causes a remount of all of the others. setState and re-rendering. setState() will always lead to a re-render unless shouldComponentUpdate() returns false. To avoid unnecessary renders, calling setState() only when the new state differs from the previous state makes sense and can avoid calling setState() in an infinite loop within certain lifecycle methods like componentDidUpdate.

When Should We Use setState() in React?, Inside of which lifecycle methods is it alright to set a component's and componentDidUpdate which lead to an infinite loop and throw an error. In React, setState is asynchronous, so the code on the following line after setState (the two console.log ()s) will be executed immediately after the setState call is placed in the event loop. This

ReactJs dynamic setState not working in for loop, Calling setState in render causes infinite loop � Issue #5591 , This may seem and call setState inside then(), it keeps on Here's what will cause an infinite loop, � Calling setState notifies the framework that the internal state of this object has changed in a way that might impact the user interface in this subtree, which causes the framework to schedule a build for this State object.

Comments
  • Also, a tip: if you run into more issues I find that while loops aren't always suitable for web because they are blocking (the next line can't run until it's done), and often what you want is a Promise or async/await. It seems fine in this case, just wanted to pass that along :)
  • Conditional are fine for setting state, just not declaring state.