Add example use cases of react-transition-group

[davidroeca]

Add recommended ways to work with libraries like react-transition-group with field arrays. I stumbled across a few tricky bugs related to working with react-transition-group. See an example here: https://codesandbox.io/s/buggy-react-transition-group-and-react-hook-form-egmik?file=/src/App.js - there are a number of bugs that pop up if you end up clicking Add and Remove in rapid succession.

My work-around for now is to avoid using the TransitionGroup component altogether, and for each field array item, render a sub-component that manages its own exiting state. Then, instead of calling remove() directly, call setExiting(true). Something like the following:

const [exiting, setExiting] = React.useState(false)
React.useEffect(() => {
  if (exiting) {
    // this timeout needs to be the same duration of the CSSTransition so that the removal happens at the same time as unmount
    setTimeout(() => remove(itemIndex), 500)
  }
}, [exiting])

Happy to take a stab at these docs if there's interest -- just point me in the right direction to get started!

[EvilaMany]

2 years left, and issues regarding transitions still not resolved

[aayusharyan]

Haha, 1 more year and still the same problem.

[Dmitriy-Babiy]

Yes, I also encountered this problem.