title: React Hooks: How to setState inside useEffect?
body: <p>I am trying to fetch data from firebase and set the retrieved data to my state using the useState hook. I know my API call is working because I can log the data from firebase, yet its not ending up in my state when I use setState(), for some reason I end up with just an empty array in state. What am I missing?</p>
  
  <pre><code>const Collection = () =&gt; {
    const [ dreams, setDreams ] = useState([])
  
    useEffect(() =&gt; {
      const retrieveCollection = (userId) =&gt; {
        firebase.firestore().collection('Dreams')
          .where('user', '==', userId)
          .onSnapshot(snapshot =&gt; {
            let newDreams = snapshot.docChanges()
            newDreams.forEach(doc =&gt; {
              console.log(doc.doc.data())
              setDreams([...dreams, doc.doc.data()])
              console.log(dreams)
            })
          })
      }
      retrieveCollection('N25c9lKITZQ7JtPEZSrMX6uC7Ot2')
    }, [])
  
  </code></pre>