Memory leak in Theme Provider
DerJacques opened this issue · 2 comments
Expectations
The Theme Provider should release all allocated memory when it is unmounted.
Reality
The Theme Provider doesn't release all the memory. It looks like some references stay around.
Steps to Reproduce
I created a Code Sandbox that shows the problem here (may require Chrome due to window.performance.memory calls):
https://codesandbox.io/s/sharp-david-ui1ndo?file=/src/App.js
After the initial calibration (which takes about 20 seconds) you will see that the heap size and change will go up slowly but steadily.
Please note that at the beginning of running the sandbox some initial memory may be garbage collected and so the change may be negative, but with time it will go up.
Additional context
Most applications likely use the <ThemeProvider> at their very root, which will cause this to be a non-issue.
It's only if the component is used in leaf components that are regularly (un-) mounted that this becomes an issue.
In one of our applications this issue resulted in the website allocating >1.5GB after some time (multiple minutes/hours), before Chrome killed the application.
Fine Print
- Component:
- Version: 8.57.0
- Browsers: all
I'm not seeing <ThemeProvider> in the codesandbox you provided (perhaps the latest wasn't saved?).
I'm curious, have you tried using wrapped leaf components with <ThemeProvider focusVisibleRef={null}>? There should only be one focusVisibleRef setup at the root. I wonder if that will plug the leak.
Argh, I kept experimenting after I created the issue. Sorry about that!
The <ThemeProvider> is back.
And I think you're on the right track with the focusVisibleRef! When I set focusVisibleRef={null} in the sandbox, the memory stays pretty consistent.