reactjs
CSSTransition is showing state changing on re-renders during exit.
What is the current behavior?
I have a TransitionGroup managing state for a CSSTransition. The child for the CSSTransition is a single slide, which re-renders upon dispatches to update state. When the state updates and the slide re-renders, you can see the state change happen on original node in the DOM before the exit happens, causing it to look as if the animation is lagging behind.
What is the expected behavior?
I expect that original node would maintain the original state as it exits, and then the newly cloned node would render the updated state as it enters. I've given the CSSTransition a unique value as the key prop so that React can track the mounts properly, but it's still happening.
The state for the slide is pulled from a context provider, and the slide is also a forwardRef as it's a functional component.
Could you provide a CodeSandbox demo reproducing the bug?
https://codesandbox.io/s/fervent-jones-yspc9v
I was able to bypass this by using
- useState for visibility to keep track of the visibility state
- useRef to keep track of the original component data
- useEffect to adjust the visibility and data management
on the same issue. But, a from the maintainers would be much better, instead of using a hacky workaround such as mine.
