components in CSSTransition will be render more than once if we use context api

[wjxalexander]

What is the current behavior?

hello, Currently I am trying to let my component inside CSSTransition to access some information via React.Context api. But I found the component will be rendered more than once if the component consume the context. However, if I pass the information via props to the component, everything is fine.

What is the expected behavior?

the component should not be rendered more than once if we use context api

Could you provide a CodeSandbox demo reproducing the bug?

here is demo with bug(with context api): https://codesandbox.io/s/eager-ramanujan-h2h8h?file=/src/App.js here is demo works as expected(without context): https://codesandbox.io/s/awesome-sun-w2c9u?file=/src/style.scss

[robdubparker]

I think I'm seeing the same or a similar issue...

In the example below where "items are incorrect", you can reproduce by adding an item, then removing the newly added item, then attempt to add an item again. Instead of adding an item, it will add two items and behavior becomes odd thereafter.

Items are correct (no TransitionGroup, exit animation doesn't work): https://codesandbox.io/s/modest-hooks-t24gc6

Items are incorrect (using TransitionGroup, with working animations): https://codesandbox.io/s/suspicious-austin-02boy8