Memory leak when animations run in backgrounded tab.

[whenmoon]

Hi there,

I have been working to try and find the root cause of a memory leak caused by React Spring when and only when the tab that the application is running in is in the background / another tab is focused. In our app the development memory footprint initially is 40MB, but after backgrounding the tab and letting it run, the memory can grow by 10 X in just 30 mins. The memory usage will grow to around 4GB on my machine and then it crashes. The problem is "fixed" by adding an event listener for the visibilitychange event and calling Globals.assign({ skipAnimation: true }) when the tab is hidden. I think the issue is that we are using Redux with RxJS epics which update state very frequently in the background, passing new objects to the react-spring hooks, and triggering new animations, but because the tab is in the background, the garbage collector is not taking care of this. Are there any best practices around using react-spring in backgrounded tabs and could the behaviour I'm describing with epics be the cause of the issue? Maybe the animations are only supposed to be triggered via use input which would mean the tab is in the foreground?

Memory usage in background without Globals.assign({ skipAnimation: true }):

Memory usage in background with Globals.assign({ skipAnimation: true }): (normal)

Here is a screenshot of the memory allocation sample:

Any help much appreciated, thanks