title: React hooks with dynamic array length
body: <p>I have the following dummy example:</p>
  
  <pre><code>function App({size}) {
    const [values, setValues] = React.useState(Array(size).fill(''));
    function onChange(index, event) {
      console.log('setting index: ', index)
      console.log('to value: ', event.target.value);
      values[index] = event.target.value;
      setValues(values);
    }
  
    console.log('values are');
    console.log(values);
  
    const inputs = Array(size).fill().map((_, index) =&gt; (
      &lt;input
        key={`input-${index}`}
        value={values[index]}
        onChange={e =&gt; onChange(index, e)}
      /&gt;
    ));
  
    return (
      &lt;React.Fragment&gt;
        {inputs}
      &lt;/React.Fragment&gt;
    )
  }
  
  ReactDOM.render(
    &lt;App size={3} /&gt;,
    document.getElementById('container')
  );
  </code></pre>
  
  <p>I expect to be able to pass <code>size</code> to <code>App</code> and dynamically get that many inputs.</p>
  
  <p>When I run this and type in the inputs, I see</p>
  
  <pre><code>values are
  ["", "", "", ""]
  setting index: 3
  to value: s
  setting index: 1
  to value: e
  setting index: 0
  to value: f
  </code></pre>
  
  <p>Looks like my component is not re-rendered. Why is that? </p>