Memory leak due to setState in unmounted components
Created by: abhishekakade
Describe the bug Memory leak because of setState on unmounted components.
If an user goes to /deepdive
(component mounted) from home but then immediately goes to /faq
(/deepdive
unmounted; /faq
mounted) before /deepdive
page could finish loading, the fetch requests in /deepdive
fetch data in the background and then react tries to setState
on (unmounted) /deepdive
. This is causing memory leaks on all routes.
To Reproduce Steps to reproduce the behavior:
- In dev mode, go to homepage (http://localhost:3000/ if on default port) and then in Dev Tools -> Network -> set throttle to slow 3G. Don't disable cache.
- Click on any other component/routes like Deep Dive/Essentials/FAQ and as soon as it starts loading, immediately go back to home page.
- Keep checking network tab. If the chunk files for that component/route have loaded, repeat step 2.
- Now once the JSON files have been fetched on slow 3G, console will show the memory leak error as it tries to setState on unmounted component after fetching has finished successfully.
Expected behavior
No setState
on unmounted components.
Screenshots If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- OS: Windows 10
- Browser: Chrome
- Version: 81.0.4044.129 (Official Build) (64-bit)