title: How to update an index inside an array with hooks without hitting "Error: Too many re-renders."
body: <p>I have an array of cells that I need to update based on some user input from a socket server. But whenever I try to update an index using useState(), react complains about &quot;Error: Too many re-renders.&quot;. I tried adding a state to indicate that the grid has changed, but that still produces the same error. Please help me :&lt;</p>
  <pre><code>const GameUI = ({ height, width }) =&gt; {
    const [grid, setGrid] = React.useState([]);
    const [didUpdate, setDidUpdate] = React.useState(0);
  
    React.useEffect(() =&gt; {
      for (let index = 0; index &lt; 64; index++) {
        const gridItem = &lt;GridSquare key={`${index}`} color=&quot;&quot; /&gt;;
        setGrid((oldArray) =&gt; [...oldArray, gridItem]);
      }
    }, []);
  
    //not re-rendering the modified component
    const handleChange = () =&gt; {
      let board = [...grid]
      board[1] = &lt;GridSquare key={`${0}${1}`} color=&quot;1&quot; /&gt;;
      setGrid(board)
      // let count = didUpdate;
      // count += 1
      // setDidUpdate(count)
    };
  
    // handleChange();
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;GridBoard grid={grid} /&gt;
        &lt;ScoreBoard /&gt;
        &lt;Players /&gt;
        {handleChange()}
        {/* &lt;MessagePopup /&gt; */}
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/3zhU4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3zhU4.png" alt="the grid" /></a></p>
  <p><a href="https://i.stack.imgur.com/FilPo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FilPo.png" alt="the errors" /></a></p>