title: React hooks to update state based on the previous state value
body: <p>Using hooks to update state based on the previous state value, I don't understand <em><strong>why</strong></em> modifying the existing object and passing that to setState() is bad.  I know this won't cause a re-render since the state still points to the same reference, but beyond that, what is the issue?  I don't understand how cloning the array, modifying that, then passing it to setState() fixes some unknown issue.</p>
  <pre><code>const [bigArr, setBigArr] = setState(Array(SOME_BIG_NUMBER).fill(false));
  </code></pre>
  <pre><code>// (1) This seems to work, but is bad for some reason.  But why?
  bigArr[325] = true;
  setBigArr(bigArr);
  </code></pre>
  <pre><code>// (2) This is preferable for some reason. Why?
  bigArrCopy = bigArr.slice();
  bigArrCopy[325] = true;
  setBigArr(bigArrCopy);
  </code></pre>
  <pre><code>// (3) Is this OK?  Why/Why not?
  setBigArr(bigArrCopy =&gt; {
      bigArrCopy[325] = true;
      return bigArrCopy;
  });
  </code></pre>