Question 208977 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Too many re-renders. React limits the number of renders to prevent an infinite loop. with for loop

I wrote a simple for inside my react component. then I wanted fill an array with push method inside it.
then suddenly I findout this error
"Too many re-renders. React limits the number of renders to prevent an infinite loop."
but why ??

import React, { useContext, useState } from "react";
import { MainContext } from "../contexts/context";
export default function useCreateBoard() {
  const contexts = useContext(MainContext);
  const [finalArray, setFinalArray] = useState([]);
  const [numberArrays, setNumbersArray] = useState([1, 2, 3, 4, 5, 6, 7, 8]);
  const [alphabetArray, setAlphabetArray] = useState([
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
  ]);
  const combinedArray = contexts.combineArrays(alphabetArray, numberArrays); // combine alphabets vs numbers return array of strings lik ==> 'a1'
  const [bgColor, setBgColor] = useState(true);

  for (let i = 0; i < combinedArray.length; i++) {
    //creating each game houses object here
    // pass them to final array
    // props => id , name , bgCol classes
    const chessHouses = {};
    chessHouses.id = i + 1;
    chessHouses.name = combinedArray[i];

    if (bgColor) {
      chessHouses.bgColorClass = "bg-black";
      setBgColor(false);
    } else {
      chessHouses.bgColorClass = "bg-white";
      setBgColor(true);
    }
    finalArray.push(chessHouses);
  }
  return [finalArray];
}```
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    ty for your answer . that was correct . And I wanted to say why I used setState => Because this custom hook should render the chess board houses, And I can't use i to swap, if I use i I have a line of the same color if I don't want the colors to be that way


  2. 0 
    setBgColor(false);

    You’re setting state in the middle of rendering. Setting state causes the component to rerender, and then you set state again, which renders again, which sets state again, which renders again, etc.

    I don’t see why this is a state. I think you just meant to have a local variable:

    let bgColor = true;

for (let i = 0; i < combinedArray.length; i++) {
  //...
  if (bgColor) {
    chessHouses.bgColorClass = "bg-black";
    bgColor = false;
  } else {
    chessHouses.bgColorClass = "bg-white";
    bgColor = true;
  }
  finalArray.push(chessHouses);
}
return [finalArray];

    Or you could alternate colors by checking if i is divisible by 2:

    for (let i = 0; i < combinedArray.length; i++) {
  //...
  if (i % 2 === 0) {
    chessHouses.bgColorClass = "bg-black";
  } else {
    chessHouses.bgColorClass = "bg-white";
  }
  finalArray.push(chessHouses);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search