We liked the idea of useTracker but we got into issues using it.
Warrning: 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.
Such errors occurred at different components. One of components (a bit stripped down, for simplicity):
There is just a little information about this warning. It complains on ActionText component, where error is coming from. But there are no useful details that could give a clue.
There are no other useEffects or setStates in this component. I have many more more complicated components and we have similar errors. These errors started showing up when we started utilize useTracker. I am tried to investigate but so far no ideas how to avoid them.
ActionText is a tiny component so I hope that it will be easier to find what’s wrong…
This error normally happens when the page updates the component with fetched data and the component is already unmounted. We had lots of this when running our End-To-End tests since the tests are very fast, and the page is tested and passed before the other components receive their respective data and are already unmounted. To solve this, we normally use a isMounted variable to check if the component is still mounted.
This also happens when your page/components are re-rendering. Therefore, the component is being mounted/unmounted before the completion of fetching the data.
That is one sign that the component is re-rendering and therefore, mount/unmount is happening on your component very fast resulting to the first error
Solution: prevent your component from re-rendering
How: Google has a lot of articles explaining how