React for loop runs twice with array values not filled properly

Question

React for loop run twice and Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. only array with even index are assigned values .

 import logo from './logo.svg';
    import './App.css';
    import Board from "./components/Board";
    import { useState, useEffect } from 'react';
    
    
    function App() {
      const [candyArray, setcandyArray] = useState([]);
        let n = 8, arr = [], i;
        for (i = 0; i < (n * n); i++) {
          arr[i] = Math.floor((Math.random() * n));
          i++;
        }
        setcandyArray(arr);
      console.log(candyArray);
      return (
        <Board />
      );
    }
    
    export default App;

Board js

export default function Board(props) {

    return (

        <div className="board">
            <div className="board-wrapper">
                <div className="candy-box" id="box1"></div>
                <div className="candy-box" id="box2"></div>
                <div className="candy-box" id="box3"></div>
                <div className="candy-box" id="box4"></div>
                <div className="candy-box" id="box5"></div>
                <div className="candy-box" id="box6"></div>
                <div className="candy-box" id="box7"></div>
                <div className="candy-box" id="box8"></div>
                <div className="candy-box" id="box9"></div>
                <div className="candy-box" id="box10"></div>
                <div className="candy-box" id="box11"></div>
                <div className="candy-box" id="box12"></div>
                <div className="candy-box" id="box13"></div>
                <div className="candy-box" id="box14"></div>
                <div className="candy-box" id="box15"></div>
                <div className="candy-box" id="box16"></div>
                <div className="candy-box" id="box17"></div>
                <div className="candy-box" id="box18"></div>
                <div className="candy-box" id="box19"></div>
                <div className="candy-box" id="box20"></div>
                <div className="candy-box" id="box21"></div>
                <div className="candy-box" id="box22"></div>
                <div className="candy-box" id="box23"></div>
                <div className="candy-box" id="box24"></div>
                <div className="candy-box" id="box25"></div>
                <div className="candy-box" id="box26"></div>
                <div className="candy-box" id="box27"></div>
                <div className="candy-box" id="box28"></div>
                <div className="candy-box" id="box29"></div>
                <div className="candy-box" id="box30"></div>
                <div className="candy-box" id="box31"></div>
                <div className="candy-box" id="box32"></div>
                <div className="candy-box" id="box33"></div>
                <div className="candy-box" id="box34"></div>
                <div className="candy-box" id="box35"></div>
                <div className="candy-box" id="box36"></div>
                <div className="candy-box" id="box37"></div>
                <div className="candy-box" id="box38"></div>
                <div className="candy-box" id="box39"></div>
                <div className="candy-box" id="box40"></div>
                <div className="candy-box" id="box41"></div>
                <div className="candy-box" id="box42"></div>
                <div className="candy-box" id="box43"></div>
                <div className="candy-box" id="box44"></div>
                <div className="candy-box" id="box45"></div>
                <div className="candy-box" id="box46"></div>
                <div className="candy-box" id="box47"></div>
                <div className="candy-box" id="box48"></div>
                <div className="candy-box" id="box49"></div>
                <div className="candy-box" id="box50"></div>
                <div className="candy-box" id="box51"></div>
                <div className="candy-box" id="box52"></div>
                <div className="candy-box" id="box53"></div>
                <div className="candy-box" id="box54"></div>
                <div className="candy-box" id="box55"></div>
                <div className="candy-box" id="box56"></div>
                <div className="candy-box" id="box57"></div>
                <div className="candy-box" id="box58"></div>
                <div className="candy-box" id="box59"></div>
                <div className="candy-box" id="box60"></div>
                <div className="candy-box" id="box61"></div>
                <div className="candy-box" id="box62"></div>
                <div className="candy-box" id="box63"></div>
                <div className="candy-box" id="box64"></div>
            </div>
        </div>
    )
}

i want to make an array with values randomly filled between 0 to 7 and this array stored in state value(candyArray) in react. thank you

Drew Reese · Accepted Answer · 2021-11-07 11:01:07Z

1

You have an unintentional side-effect in the component body. You likely are rendering you app into a React.Strictmode component that runs specific functions and methods twice as a way to help you detect unintnetional side-effect. One of these on-purpose double-invokations is the function body of function components. Since the side-effect is a state update this triggers a rerender. This is the render looping that React is complaining about.

Use a useEffect to run the effect once when the component mounts. Use a second useEffect hook to log when the candyArray state updates.

You also appear to be double incrementing your loop counter i, leading to only every other array element being updated. Remove the additional i++ from the loop body.

const Board = () => <div>Board</div>;

function App() {
  const [candyArray, setcandyArray] = React.useState([]);
  
  React.useEffect(() => {
    let n = 8, arr = [], i;
    for (i = 0; i < (n * n); i++) {
      arr[i] = Math.floor((Math.random() * n));
    }
    setcandyArray(arr);
  }, []);

  React.useEffect(() => {
    console.log(candyArray.map((el, i) => `[${i}->${el}]`));
  }, [candyArray]);

  return (
    <Board />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <App />,
  rootElement
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root" />

edited Nov 7, 2021 at 11:01

answered Nov 7, 2021 at 10:39

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

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

2 Comments

Drew Reese Over a year ago

@vardhaman Did you intend to double increment i each loop? Once in the for-loop function and once again in the loop body?

Drew Reese Over a year ago

@vardhaman I see. Has my updated answer sufficiently addressed/resolved your question/issue?

Collectives™ on Stack Overflow

React for loop runs twice with array values not filled properly

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related