title: 'setState' of useState hook occurs twice by one call
body: <p>There is a board with squares their value relies on an array, it is handled with <code>useState</code> hook. Every click should raise the value by one, but unfortunately, it raises it by two (except the first click).</p>
  <p>My questions are:</p>
  <p>(1) Why is it happen, (2) how to avoid it, and, in general, (3) is there a better way to handle such an array with hooks.</p>
  <pre><code>let emptyBoard = Array.from({ length: parseInt(props.rows, 10) }, () =&gt;
      new Array(parseInt(props.columns, 10)).fill(0)
    );
  
    const [squaresValues, setSquaresValue] = useState(emptyBoard);
  
    function onClick(id) {
      const [rowIndex, cellIndex] = id;
      console.log(&quot;the &quot; + id + &quot; square was clicked&quot;);
      setSquaresValue(prevValues =&gt; {      
        let newBoard = [...prevValues];
        console.log(&quot;before: &quot; + newBoard[rowIndex][cellIndex]);
        newBoard[rowIndex][cellIndex] = newBoard[rowIndex][cellIndex] + 1;
        console.log(&quot;after: &quot; + newBoard[rowIndex][cellIndex]);
        return newBoard;
      }
      );
    }
  </code></pre>
  <p>The log:</p>
  <pre><code>the 3,0 square was clicked 
  before: 0 
  after: 1 
  the 3,0 square was clicked 
  before: 1 
  after: 2 
  before: 2 
  after: 3 
  </code></pre>
  <p>As can be seen, from the second click the value is raised twice by every click.</p>