How to stop Firestore `get` query on componentWillUnmount

Question

okay so I'm fetching data from Firestore in componentDidMount but while it's fetching the data if I change the component I get error saying:

Warning: Can't call setState (or forceUpdate) 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 the componentWillUnmount method.

In Firebase real time database we call ref.off() to stop query.

Wondering how to do it in Firestore

componentDidMount() {
  Users.get().then(({ docs }) => {
    const users = docs.map(user => user.data());
      this.setState({ users });
  });
}

componentWillUnmount(){

}

I don't think there's a way to abort an ongoing `get()` operation. For `onSnapshot()` you get back a subscription that you can call to unsubscribe, but `get` doesn't have that as far as I can see. — Frank van Puffelen, Sep 26 '18 at 20:58
See https://stackoverflow.com/questions/46642652/how-to-remove-listener-for-documentsnapshot-events-google-cloud-firestore — Frank van Puffelen, Sep 26 '18 at 21:44

score 2 · Accepted Answer · answered Jan 14 '20 at 20:25

2

I found a workaround if anybody is still looking for the answer:

componentDidMount() {
  this.mounted = true;

  Users.get().then(({ docs }) => {
    const users = docs.map(user => user.data());
      if(this.mounted) this.setState({ users });
  });
}

componentWillUnmount(){
  this.mounted = false;
}

this.mounted will be false when component is unmounted and setState will not work.

answered Jan 14 '20 at 20:25

Muhammad Ovi

1,053
14
26

This doesn't really abort the needless fetch or save network bandwith, it just suppresses the `React` warning about a memory leak – JayCodist Aug 09 '20 at 17:01

score 1 · Answer 2 · answered Apr 04 '19 at 22:17

1

As Get is not a real-time method so there is no way to stop it on componentWillUnmont, it should not be getting called once your component is unmounted.

answered Apr 04 '19 at 22:17

Jeff Adam

103
1
11

How to stop Firestore `get` query on componentWillUnmount

2 Answers2

Linked