search

joshwcomeau / react-flip-move

Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
http://joshwcomeau.github.io/react-flip-move/examples
MIT License
4.09k stars 258 forks source link

Anyone faces memory leak issue? #187

Closed noru closed 6 years ago

noru commented 7 years ago

I had this problem running my page on an android device: after a while the browser would just crash or kill by android.

After some profiling I found this:

  1. memory usage would go up and cannot be GC-ed
  2. I'm using disableAllAnimations={true} (and I've read the 'Known Issue' part)

My app, unlike most web pages, supposes to be running on a memory stringent device for a relatively long period. I think it can be easily reproduced by rendering a list real fast over and over.

Lastly, it's probably not an issue in most cases and I could manage to pull out a work around. Just hope this info would help others.

Thanks for this cool component!

Pajn commented 7 years ago

This seems to be happening for me as well if the screen becomes black or maybe also if I keep the browser on a different desktop than the one I'm viewing. As can be seen here in the screenshot the internal children array is not cleared.

screen shot 2017-09-13 at 15 26 58

I believe that this happen if the animation is not run (which I guess Chrome might choose to do in the above circumstances).

A theoretical fix:

  1. Add a property to track if the animation has started
  2. Add an event listener to set that property to true
  3. Record the timestamp when the animation should start
  4. When children is updated from the outside, go though all cached children and remove those that have not started their animation and should have started their animation more than one second ago (exact time might be tweaked).
joshwcomeau commented 7 years ago

Thanks for the report! I was aware of increased memory consumption but thought it only occurred when items were swapped really quickly / interrupted.

I think the root cause of the issue is that I'm using ontransitionend event-handler, and it's been unreliable. Entirely possible I'm mistaken and it's a silly mistake on our part, but that's been my experience.

One possible solution, similar to @pajn's suggestion, is to set an interval (maybe 5 minutes?) that compares the children in state to the children in props, and removes any extraneous ones. Some care would have to be taken to ensure that it doesn't do this during an animation, otherwise an exiting node may suddenly disappear.

But yeah, I suspect this issue will take care of itself when we move to the Web Animations API. Just waiting for it to have non-terrible browser support, or a smaller polyfill :/

joshwcomeau commented 6 years ago

Closing this as a wontfix, as I don't foresee time to look into this, and it doesn't appear to be a widely-experienced issue