What are the consquences of unmounting during a network request (memory leak warning)?

user_3346060 0
Viewed 87

If a react component is unmounted during an asynchronous effect that has subsequent state updates, we are met with a warning that says it indicates a memory leak.

const [value, setValue] = useState('checking value...');
useEffect(() => {
    fetchValue().then(() => {
     setValue("done!"); // ⚠️ what if the component is no longer mounted ?
     // we got console warning of memory leak
   });
}, []);

Warning:

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.

There are numerous questions on what to do to remove this warning, but why should I attempt to remove it? I think the most common scenario this happens is after network requests, which I assume after completion would leave the component free for garbage collection (correct me if I'm wrong). Since the state updates are no-op, is there any reason to do something about the warning except for the sole purpose of not having to see it?

I understand that there are scenarios where this is important, like unsubscribing to event, but it isn't very common in my experience.

The reason for asking is that handling the unmount state in a large application is a hassle, especially if you haven't build it with this in mind from the start.

Question: Are there any end-user consequences of ignoring the memory leak warning from scenarios like shown above?

Bonus question: Is it possible to disable the warning somehow?

react-hooks reactjs
1 Answers

If my understanding of this thread is correct, that warning was added to protect against such cases:

useEffect(() => {
  function handleChange() {
     setState(store.getState())
  }
  store.subscribe(handleChange)
}, [])

When the store could indefinitely hold a reference to the the component (even after it unmounts), thus causing memory leaks.

But in other situations like making a API call once when nothing references the component indefinitely, it should be fine.

user_39630670
Related