Can't perform a React state update on an unmounted component.

[tfnribeiro]

We have a few of these types of errors across the application:

This happens whenever we unmount the component and an async call wants to update a state that no longer exists. This is easy to fix, if we we could clear the functions when we know the function is being unmounted, but when we have more complex calls, it's hard to know which function exactly is trying to update.

I saw a possible solution in this discussion: https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component

Essentially, we can have a reference that is updated to false whenever the component is unmounted, and then all the setters have this condition, is component mounted. We could generalize this logic to be under a hook, so whenever the set is called, we check if the component is mounted.

Not sure if this is important, but I decided to log it in case we see these warnings we know the cause for them.

[mircealungu]

Thanks for opening this @tfnribeiro. It's not cool to keep warnings in the project. We should fix them.

However, the first solution in that thread I'm not convinced of. If we have a lingering function that does not get cleaned up after a component unmounts, then we should figure out a way of getting rid of the function, not adding one more conditional inside it. In fact, later in the thread we see an answer that argues that a check for component is mounted might actually be an anti-pattern in React. Their solution for fetch with an AbortController might be relevant though... and hopefully we can put it somewhere in our _get or _post methods, so we don't have to call it from every component: that could be unpleasant.

What I don't understand is what do those people mean who say that they upgraded to newer react and they don't have the warning anymore? Are we not using the latest version of React?