Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

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:

  1. 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.
  2. Click on any other component/routes like Deep Dive/Essentials/FAQ and as soon as it starts loading, immediately go back to home page.
  3. Keep checking network tab. If the chunk files for that component/route have loaded, repeat step 2.
  4. 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. mem-leak-all

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Chrome
  • Version: 81.0.4044.129 (Official Build) (64-bit)