How to fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function error

Question

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.

useEffect(() => {
    const unsubscribe = streamCourses({
      next: (querySnapshot) => {
        const task = querySnapshot.docs.map((docSnapshot) => 
            mapDocTask(docSnapshot)
          );
        setCourseDetails(task);
      },
      error: (error) => console.log(error),
    });
    return unsubscribe;
  }, [setCourseDetails]);

HI please include some details of the scenario you are having with. It will help us understand your question — German, Oct 27 '21 at 07:11
Why is there a `setCourseDetails` there? And what does it do? — Mario Nikolaus, Oct 27 '21 at 07:36

score 5 · Answer 1 · answered Oct 27 '21 at 07:40

I had a similar issue to this. What I had to do to solve it was two things:

(1) I created a State boolean isMounted which was set to true by default and was used to wrap the contents of my useEffects so that the contents of my useEffects would only run if the screen was mounted.

(2) I created a useEffect dedicated solely to cleanup. Meaning this useEffect had nothing besides a return statement in it which set the various State variables I had to their default values.

Example:

useEffect(() => {
    if (isMounted) {
        const unsubscribe = streamCourses({
          next: (querySnapshot) => {
            const task = querySnapshot.docs.map((docSnapshot) => 
                mapDocTask(docSnapshot)
              );
            setCourseDetails(task);
          },
          error: (error) => console.log(error),
        });
        return unsubscribe;
    }
  }, [setCourseDetails]);

useEffect(() => {
    return () => {
        setCourseDetails(null);
        setIsMounted(false);
    }
}, []);

**I fixed that error with the above guidance. Thank you very much for your help.** — P A T Himaranga, Oct 27 '21 at 16:33

How to fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function error

1 Answers1

Linked