title: Firebase with useeffect cleanup function
body: <p>I'm trying to get all data with the 'public' parameter of a firebase collection and then use useffect, but the console accuses error.</p>
  
  <p>I took this structure from firebase's documentation:
  <a href="https://firebase.google.com/docs/firestore/query-data/get-data#get_multiple_documents_from_a_collection" rel="nofollow noreferrer">https://firebase.google.com/docs/firestore/query-data/get-data#get_multiple_documents_from_a_collection</a></p>
  
  <p>but the console says 'Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function'</p>
  
  <p>So I went to this other page:
  <a href="https://firebase.google.com/docs/firestore/query-data/listen#detach_a_listener" rel="nofollow noreferrer">https://firebase.google.com/docs/firestore/query-data/listen#detach_a_listener</a></p>
  
  <p>But I'm not using onSnapshot, besides firebase documentation seems wrong to me, since unsub is not a function.</p>
  
  <pre><code>useEffect(() =&gt; {
  
          let list = []
  
          const db = firebase.firestore().collection('events')
          let info = db.where('public', '==', 'public').get().then(snapshot =&gt; {
              if (snapshot.empty) {
                  console.log('No matching documents.');
                  setLoading(false)
                  return;
              }
              snapshot.forEach(doc =&gt; {
                  console.log(doc.id, "=&gt;", doc.data())
                  list.push({
                      id: doc.id,
                      ...doc.data()
                  })
              })
              setEvents(list)
              setLoading(false)
          })
              .catch(error =&gt; {
                  setLoading(false)
                  console.log('error =&gt; ', error)
              })
          return () =&gt; info
  
      }, [])
  </code></pre>