javascript - Firestore unsubscribe from useEffect - Stack Overflow

admin管理员组

文章数量:1391951

I'm trying to use useEffect to stop listening to Firebase Firestore collection changes.

I can get Firebase data, But I can't access this unsubscribe();

How can i fix this?

  let unsbscribe;

  async function getFirebaseData() {
      unsbscribe = db.collection('room')
          .where('joinUser', 'array-contains-any', [10])
          .onSnapshot((res) => {
            // do something...
          });


  useEffect(() => {
    getFirebaseData();
    return () => {
      unsbscribe(); // throws an error that unsubscribe is not a function.
    };
  }, []);

I'm trying to use useEffect to stop listening to Firebase Firestore collection changes.

I can get Firebase data, But I can't access this unsubscribe();

How can i fix this?

  let unsbscribe;

  async function getFirebaseData() {
      unsbscribe = db.collection('room')
          .where('joinUser', 'array-contains-any', [10])
          .onSnapshot((res) => {
            // do something...
          });


  useEffect(() => {
    getFirebaseData();
    return () => {
      unsbscribe(); // throws an error that unsubscribe is not a function.
    };
  }, []);

• javascript
• reactjs
• firebase
• react-native
• google-cloud-firestore

Share Improve this question Follow edited Jan 25, 2022 at 9:24 Shahnawaz Hossan 2,72022 gold badges1515 silver badges2424 bronze badges asked Jul 16, 2020 at 12:03 RickRick 8911 silver badge77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can unsubscribe it from inside the useEffect hook in this way:

useEffect(() => {
    const unsubscribe = db.collection('room')
        .where('joinUser', 'array-contains-any', [10])
        .onSnapshot((res) => {
            // do something...
        });
    return () => unsubscribe()
}, []);

Try to return just unsubscribe

 let unsbscribe;

  async function getFirebaseData() {
      unsbscribe = db.collection('room')
          .where('joinUser', 'array-contains-any', [10])
          .onSnapshot((res) => {
            // do something...
          });


  useEffect(() => {
    getFirebaseData();
    return unsubscribe
  }, []);

本文标签： javascriptFirestore unsubscribe from useEffectStack Overflow