title: UI not re-rendering on state update using React Hooks and form submission
body: <p>I'm trying to update a UI using React Hooks and a form.  I have a state set to monitor the value on the form and when I click submit, I want to add this value to an array (held in state) and display it on the UI.  My problem is that when I submit the value, although it is added to the array (and state is updated), the UI only updates when I change the value in the input.</p>
  
  <p>My Component is as follows:</p>
  
  <pre><code>const PushToArrayUpdateState = () =&gt; {
  
      const [array, setArray] = useState([]);
      const [formVal, setFormVal] = useState(``);
  
      const handleSubmit = event =&gt; {
          event.preventDefault();
          let updateArray = array;
          updateArray.push(formVal);
          console.log(updateArray);
          setArray(updateArray);
      };
  
      return (
          &lt;div&gt;
              &lt;form onSubmit={handleSubmit}&gt;
                  &lt;input type="text" name="arrayVal" onChange={e =&gt; setFormVal(e.target.value)} /&gt;
                  &lt;input type="submit" value="Submit" /&gt;
              &lt;/form&gt;
              &lt;div&gt;
                  {array.map((val, index) =&gt; &lt;p key={index}&gt;{val}&lt;/p&gt;)}
              &lt;/div&gt;
          &lt;/div&gt;
      );
  };
  </code></pre>
  
  <p>You can also see this [not] working at:
  <a href="https://codesandbox.io/s/p3n327zn3q" rel="noreferrer">https://codesandbox.io/s/p3n327zn3q</a></p>
  
  <p>Has anyone got any suggestions as to why the setArray in the handleSubmit function is not automatically causing the component to re-render?</p>