title: React & Firebase, useState not updating, and passing in empty array, to array in document
body: <p><strong>Hi I hope your having a good day so far, I have a problem I'd like to ask for help to, if you can help then please feel free to answer the question below.</strong></p>
  <p>So I have a Firebase collection named 'accounts', and I wanna set an array inside my doc named 'basket' to that document. It works fine, but there is a problem, and that is the useState that I have my array in (I pass the useState using map into the basket). First passes an empty array, which is the default value of the useState, but the reason I'm confused it that value I pass into the useState, is updating fine, and has the value in, but when I console.log, or update my array using the useState, it does not contain an array, only the second time I click it, is it added.</p>
  <p><strong>This is the code that runs it.</strong></p>
  <pre><code>const [addBasket, setBasket] = useState([]);    
  
  const addToBasketCollection = (name) =&gt; {
      setBasket([...addBasket, name.toLowerCase()])
      const user = auth.currentUser;
      console.log('Name: ' + name, '\nArray: ' + [...addBasket, name.toLowerCase()], '\nWhy does this not update: ', addBasket)
      db.collection('accounts').doc(user.uid).set(({
          basket: addBasket.map(doc =&gt; doc),
      }), { merge: true })
  }
  
  
  &lt;button className=&quot;item-info__button&quot; onClick={() =&gt; { addToBasketCollection(product.info.name) }}&gt;Add&lt;/button&gt;
  </code></pre>
  <p><strong>Note:</strong>
  The console.log() above gives this back on the first click of the button:</p>
  <pre><code>Name: Mori 
  Array: more 
  Why does this not update:  []
  </code></pre>
  <p>On the second click of the button it returns this:</p>
  <pre><code>Name: Mori 
  Array: more 
  Why does this not update:  [&quot;mori] // &quot;mori&quot; is the item's name that I added.
  </code></pre>