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

admin管理员组

文章数量:1391947

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.

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

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.

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

• javascript
• react-native
• react-hooks
• expo

Share Improve this question Follow asked Oct 27, 2021 at 6:27 P A T HimarangaP A T Himaranga 11111 gold badge22 silver badges55 bronze badges 2

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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);
    }
}, []);

本文标签：