React pose stutter / performance issues

[thevisualfox]

Using the lastes version of react-pose ( 4.0.6 )

Currently, when PoseGroup triggers leave animations, it removes the animating element from the DOM once that animation is finished.

The problem is that when lots of other animations are still animating, this React reconciliation stutters.

Steps to reproduce the behavior:

1. Go to https://codepen.io/anon/pen/mKEzVp?editors=0010
2. Watch how the animation stutters

I've read that the onRest prop should fix this, but I'm not sure how to implement this.
This is prominent across all browsers!

I hope this could get fixed, or if I'm doing something wrong, someone could correct me!

Cheers.

[Andarist]

I've started looking into this problem, leaving a "simplified" version of your code here - https://codesandbox.io/s/pp24p7q720 for a reference.

[jontro]

When upgrading to 4.0.6 from 4.0.4 I've started experiencing performance issues when the onExit animation triggers in combination with inserting new elements in the PoseGroup. It might be related to this fix #682

[robbeman]

I came across this issue because I experienced the same, but then I noticed the following:

React Pose has been deprecated in favour of Framer Motion

(See https://github.com/Popmotion/popmotion/tree/master/packages/react-pose) You might want to check that out, it looks like a nice way to go if your project is not too big to migrate.