Hello 👋
As part of our project, we are using Facebook's new Memlab tool to detect memory leaks in SPA applications.
While running the tool and analyzing the code of react-multi-carousel, we saw that your project does a very good job of ensuring that all async operations are cancelled when the component unmounts. However, as per Memlab execution results, we found some dangling timers that were causing the memory to leak (screenshots below).
[before]
Hence we added the fix by clearing the timeouts and you can see the heap size and # of leaks reducing noticeably:
We used static variables, instead of normal ones, so that in future, even if the code changes for e.g encapsulating these timers in a nested function, the ID vars should still retain their correct (class) context, as opposed to volatile 'this' context.
We ran the unit test cases, and the results were the same as before our patch, i.e these patches had no effect on any case result.
You can analyze this and other potential leak sources, if you like, by running Memlab with a scenario file covering the maximum # of use cases.
Following is a sample of the scenario file we used (it needs to be a .js file but attaching here in .txt form):
multi-carousel-memlab-scenario.txt
Note that some other reported leaks (in Memlab) originated from Storybook, hence were ignored.
Arooba-git
commented
1 year ago
Hello 👋 As part of our project, we are using Facebook's new Memlab tool to detect memory leaks in SPA applications. While running the tool and analyzing the code of react-multi-carousel, we saw that your project does a very good job of ensuring that all async operations are cancelled when the component unmounts. However, as per Memlab execution results, we found some dangling timers that were causing the memory to leak (screenshots below).
[before]
Hence we added the fix by clearing the timeouts and you can see the heap size and # of leaks reducing noticeably:
We used static variables, instead of normal ones, so that in future, even if the code changes for e.g encapsulating these timers in a nested function, the ID vars should still retain their correct (class) context, as opposed to volatile 'this' context.
We ran the unit test cases, and the results were the same as before our patch, i.e these patches had no effect on any case result. You can analyze this and other potential leak sources, if you like, by running Memlab with a scenario file covering the maximum # of use cases. Following is a sample of the scenario file we used (it needs to be a .js file but attaching here in .txt form): multi-carousel-memlab-scenario.txt
Note that some other reported leaks (in Memlab) originated from Storybook, hence were ignored.