title: React hooks state variable not updating after rerender
body: <p>In the following example I have an array of element (fruits) that I want to update and use the updated array to perform other operations (in this specific case saving the updated list). My understanding was on re rerender the state will update...but it does not here..or there is a delay between state updating and my action. </p>
  
  <p>In the <code>addFruit</code> function I can see 'Peach' being immediately added but the console from the <code>saveFruits</code> function still shows the state <code>fruit</code> remains unchanged. How can I have this updated to use immediately. (And I know in this case I can pass <code>newFruits</code> variable to <code>saveFruits</code> to update but I need <code>fruits</code> to be updated for other places as well). </p>
  
  <p>Forgive me because this is my millionth question about react async states but there's something just not clicking for me yet. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const { useState } = React;
  
  function ParentComp() {
      const[fruits, setFruits] = useState(['Apple', 'Orange', 'Banana', 'Pomegranate', 'Kiwi'])
  
  
     const addFruit = () =&gt; {
        let newFruits = Object.assign([], fruits)
        newFruits.push('Peach')
        setFruits(newFruits)
        saveFruits()
     }
     
     const saveFruits = () =&gt; {
        console.log('API req to save fruits.', fruits)
     }
  
     return (
      &lt;div&gt;
      { fruits.map( (fruit, key) =&gt; &lt;div key={key}&gt;{fruit}&lt;/div&gt; ) }
        &lt;button type="button" onClick={addFruit}&gt;Add Peach&lt;/button&gt;
      &lt;/div&gt;
     )
  }
  
  ReactDOM.render(&lt;ParentComp /&gt;, document.getElementById('root'))</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin&gt;&lt;/script&gt;
  
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>