While implementing UX-407 and UX-234 we found some potential code smells when using ReactCSSTransitionGroup:
- For components that need to remove themselves, we have relied in setTimeout with a delay that matches the "leave" animation's duration to trigger the remove.
- ReactTransitionGroup exposes useful callbacks like componentDidLeave that would be better to utilize rather than setTimeout with the right delay value.
- Having to ensure that the animation durations defined in CSS match the durations declared on ReactCSSTransitionGroup properties (e.g. transitionAppearTimeout, transitionLeaveTimeout) is the source of potential bugs.
- Perhaps we can extract the timings from the CSS definition to avoid having to keep them in sync. May not be totally feasible, needs more research.