0

I've been receiving an error message in the developer console suggesting a type of memory leak tied to my useEffect()'s. The error suggests to develop some form of 'cleanup' function, but I'm not sure why this is occurring in the first place or how to go about developing this. How should I approach this? My useEffect() functions in question are below:

useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  useEffect(() => {
    if (!isFetching) return;
    fetchMoreListItems();
  }, [isFetching]);

  useEffect(() => {
    let mounted = true;
    if (!props.resource) return;
    props.resource
      .follow('item-collection')
      .followAll('item')
      .then(resources => {
      if (mounted) {
         setItems(resources);
        }
      })
      .catch(err => console.error('Error fetching resources: ' + err));
      return () => mounted = false;
  }, [itemResource]);
Ibrahim Abubaker
  • 41
  • 4
  • 1
    It looks like you're still running one of the requests when the component unmounts, please check how to cancel an http request based on the tool you're using(axios, fetch, etc..) – jean182 Mar 09 '21 at 19:53
  • 1
    I'm sure there are lots of existing answers about this. Basically you need to make your `setItems` call conditional so that you will not call `setItems` if the component has been unmounted before the `Promise` resolves. [This article explains how](https://juliangaramendy.dev/blog/use-promise-subscription) – Linda Paiste Mar 09 '21 at 20:26
  • Does this answer your question? [Can't perform a React state update on an unmounted component](https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component) – Linda Paiste Mar 09 '21 at 20:28
  • I've edited the `setItems()` call as described in the article, but unfortunately I'm still running into the same issue. I've updated my post to reflect the changes. – Ibrahim Abubaker Mar 09 '21 at 20:36

0 Answers0