0

I'm using <TransitionGroup/> and <CSSTransition timeout={2000}>... and all transitions are set to take 2000ms in CSS.

If I add and then remove a small number of entries, it takes roughly 2000ms for onExited() to be called as expected.

But with 500 entires, it takes TransitionGroup 48 seconds (chrome) or 486 (!!!!) seconds (firefox) before onExited() is called on the last element after removing 500 elements.

Why is that? This makes it useless for my use-case.

I've created a sandbox example which is just a modification of the TransitionGroup example from the doc. There is a button to add 100 items at a time and a a "Remove All" button that prints to the console how long it took from beginning the removal until both onExiting and onExited() are called on the last element.

This sounds to me like a bug, but if there is something I can do differently, that would be great.

If it really is a bug I guess I could do it with pure CSS, but right now, I don't know how...

Peter V. Mørch
  • 13,830
  • 8
  • 69
  • 103

1 Answers1

0

There was nothing wrong in the way TransitionGroup was used. I've created:

TransitionGroup takes 486 seconds to remove 500 components · Issue #599 · reactjs/react-transition-group

where I've also outlined why in the code I think this happens, and a half-assed, incomplete attempt at fixing it.

Peter V. Mørch
  • 13,830
  • 8
  • 69
  • 103