title: Why is useState not triggering re-render?
body: <p>I've initialized a state that is an array, and when I update it my component does not re-render. Here is a minimal proof-of-concept:</p>
  <pre><code>function App() {
    const [numbers, setNumbers] = React.useState([0, 1, 2, 3]);
    console.log(&quot;rendering...&quot;);
    return (
      &lt;div className=&quot;App&quot;&gt;
        {numbers.map(number =&gt; (
          &lt;p&gt;{number}&lt;/p&gt;
        ))}
        &lt;input
          type=&quot;text&quot;
          value={numbers[0].toString()}
          onChange={newText =&gt; {
            let old = numbers;
            old[0] = 1;
            setNumbers(old);
          }}
        /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>Based on this code, it seems that the input should contain the number 0 to start, and any time it is changed, the state should change too. After entering &quot;02&quot; in the input, the App component does not re-render. However, if I add a setTimeout in the onChange function which executes after 5 seconds, it shows that numbers has indeed been updated.</p>
  <p>Any thoughts on why the component doesn't update?</p>
  <p>Here is a <a href="https://codesandbox.io/s/jovial-meitner-v2f0l" rel="noreferrer">CodeSandbox</a> with the proof of concept.</p>