您建议在 useEffect 挂钩中取消订阅的模式是什么？

Question

Most of you have probably seen this React warning. Me too, and it is clear to my why React gives warns us about unmounting during a state update. But I'm trying to figure out what is the best React pattern prevent a possible memory leak.

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.

In my projects I'm using this boolean flag didCancel to let my data fetching logic know about the state of the component. If the component did unmount, the flag should be set to true which results in preventing to set the component state after the data fetching has been asynchronously resolved eventually.

useEffect(() => {
    let didCancel = false;

    const fetchEvents = () => {
      fetch(url, settings)
        .then(res => {
          return res.json();
        })
        .then(({ data }) => {
          if (!didCancel) {
            setEvents(data.events);
          }
        })
        .catch(err => {
          console.log(err);
          if (!didCancel) {
            setLoading(false);
          }
        });
    };

    fetchEvents();

    return () => {
      didCancel = true;
    };
  }, []);

So eventhough this works, I just want to know what you guys are using as a pattern. What could be seen as best practice? Is there remarkable difference when fetching data, then when you're only updating state? Please let me know!

Answer 1

I prefer using defer from rxjs library for this:

useEffect(() => {
  const subscription = defer(() =>
    fetch(url, settings).then(response => response.json())
  ).subscribe({
    next: ({ data }) => {
      setEvents(data.events);
    },
    error: () => {
      setLoading(false);
    },
    complete: () => {
      setLoading(false);
    }
  });

  return () => subscription.unsubscribe();
}, []);

Answer 2

What is didCancel supposed to be doing? It just looks like a local variable you're switching to true on mount. Is it used in your fetchEvents ? Your fetchEvents will never be called after the initial mount