I'm trying to get all data with the 'public' parameter of a firebase collection and then use useffect, but the console accuses error.

I took this structure from firebase's documentation:

but the console says 'Warning: Can't perform a React state update on an unmounted ponent. 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'

So I went to this other page:

But I'm not using onSnapshot, besides firebase documentation seems wrong to me, since unsub is not a function.

useEffect(() => {

        let list = []

        const db = firebase.firestore().collection('events')
        let info = db.where('public', '==', 'public').get().then(snapshot => {
            if (snapshot.empty) {
                console.log('No matching documents.');
                setLoading(false)
                return;
            }
            snapshot.forEach(doc => {
                console.log(doc.id, "=>", doc.data())
                list.push({
                    id: doc.id,
                    ...doc.data()
                })
            })
            setEvents(list)
            setLoading(false)
        })
            .catch(error => {
                setLoading(false)
                console.log('error => ', error)
            })
        return () => info

    }, [])

I'm trying to get all data with the 'public' parameter of a firebase collection and then use useffect, but the console accuses error.

I took this structure from firebase's documentation: https://firebase.google./docs/firestore/query-data/get-data#get_multiple_documents_from_a_collection

but the console says 'Warning: Can't perform a React state update on an unmounted ponent. 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'

So I went to this other page: https://firebase.google./docs/firestore/query-data/listen#detach_a_listener

But I'm not using onSnapshot, besides firebase documentation seems wrong to me, since unsub is not a function.

useEffect(() => {

        let list = []

        const db = firebase.firestore().collection('events')
        let info = db.where('public', '==', 'public').get().then(snapshot => {
            if (snapshot.empty) {
                console.log('No matching documents.');
                setLoading(false)
                return;
            }
            snapshot.forEach(doc => {
                console.log(doc.id, "=>", doc.data())
                list.push({
                    id: doc.id,
                    ...doc.data()
                })
            })
            setEvents(list)
            setLoading(false)
        })
            .catch(error => {
                setLoading(false)
                console.log('error => ', error)
            })
        return () => info

    }, [])

• javascript
• reactjs
• firebase
• use-effect

Share Improve this question Follow asked Oct 19, 2019 at 13:44 user12243148user12243148 3

• Can you try return () => info() – SuleymanSah Commented Oct 19, 2019 at 14:00
• then it says "TypeError: info is not a function" – user12243148 Commented Oct 19, 2019 at 14:19
• Did you check these posts? stackoverflow./questions/56894293/… – SuleymanSah Commented Oct 19, 2019 at 14:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You need to invoke the listener function to detach and unmount. https://firebase.google./docs/firestore/query-data/listen#detach_a_listener

useEffect(() => {

        let list = []

        const db = firebase.firestore().collection('events')
        let info = ...
        return () => info() # invoke to detach listener and unmount with hook

    }, [])

You don't need to clear a .get(), it's like a normal Fetch api call.

You need to make sure your ponent is still mounted when you setLoading

Example:

// import useRef
import { useRef } from 'react'
// At start of your ponent
const MyComponent = () =>{
   const isMounted = useRef(false)
   useEffect(() => {
     isMounted.current = true;
     return () => isMounted.current = false;
  }, [])

   // Your query
   db.where('public', '==', 'public').get().then(snapshot => {
      if(isMounted.current){
        // set your state here. 
      }
   })

  return <div></div>
}