1

I'm trying to avoid users to get to certain pages if they are not logged in. If they try to access "citas" but they are not logged it, they are redirected to "login". The problem is that I'm getting this error.

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.

This is the "citas" code

 const Citas = () => {
  const { currentUser } = useContext(AuthContext);
  const history = useHistory();

      useEffect(() => {
      const unsuscribe = database.collection('NegociosDev').onSnapshot(function () {
        database.collection('NegociosDev').doc('Peluquerías').collection('Negocios').doc('PR01').collection('citas').where('CheckIn', '>=', startDate.toISOString().split('T')[0]).get()
            .then(response => {
                const fetchedCitas = [];
                const fetchedIDs = [];
                response.forEach(document => {
                    const fetchedCita = {
                        id: document.id,
                        ...document.data()
                    };
                    const fetchedID = document.id;

                    fetchedIDs.push(fetchedID);

                    fetchedCitas.push(fetchedCita);
                });
                setCitas(fetchedCitas);
                setIDs(fetchedIDs)


            })
        return () => unsuscribe();
    });

  if (!currentUser) {
    return <Redirect to="/index" />;
  }
  return <div></div>;
};

It redirects to the login page, but I keep getting this error.

David Díaz
  • 89
  • 4
  • 15
  • 2
    Sometimes the async task finishes after the component is unmounted. Look into `cancel token` or similar to abort the API call before the component unmounts (by returning a cleanup function from your effect) – Dupocas Jul 21 '20 at 11:49
  • I'm new to React and I don't find anything related to what you said that can help me with what I have. Would you mind sharing some links? – David Díaz Jul 21 '20 at 12:58
  • https://stackoverflow.com/questions/55020041/react-hooks-useeffect-cleanup-for-only-componentwillunmount – ksav Jul 21 '20 at 13:10
  • You have to cleanup your `database.collection().get()` call in the return of a useEffect. – ksav Jul 21 '20 at 13:11
  • Is that firebase? – ksav Jul 21 '20 at 13:11
  • Yes it is. I saw the link, and if I understand correctly, if I use `useEffect( () => () => console.log("unmount"), [] ); ` it should work? – David Díaz Jul 21 '20 at 13:13
  • I think you need to call `database.off()` but I'm not 100% sure. – ksav Jul 21 '20 at 13:16
  • https://firebase.google.com/docs/database/web/read-and-write#detach_listeners – ksav Jul 21 '20 at 13:18
  • Seems like to use "off" I have to use "on" and "ref" but I'm not. – David Díaz Jul 21 '20 at 13:23
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/218288/discussion-between-ksav-and-david-diaz). – ksav Jul 21 '20 at 13:26
  • 2
    The `on()` and `off()` methods are for the Firebase Realtime Database, while you are using Cloud Firestore. While both databases are part of Firebase, their APIs are different and unrelated. For detaching a listener in Firestore, see https://firebase.google.com/docs/firestore/query-data/listen#detach_a_listener – Frank van Puffelen Jul 21 '20 at 13:30
  • Updated the code, tried to implement what you linked but I keep getting the same error. I don't know if I'm doing something wrong but nothing seems to work. – David Díaz Jul 21 '20 at 15:13
  • Did you try the suggestion regarding detaching the listener from @FrankvanPuffelen? – Artemis Georgakopoulou Jul 22 '20 at 14:07

0 Answers0