StrictMode warning for findDOMNode and legacy context API in Transition as of React 16.6

[TAGraves]

Do you want to request a feature or report a bug?
Report a bug

What is the current behavior?
When using <Transition /> inside of <React.StrictMode />, warnings are logged about findDOMNode and the legacy context API (as of React 16.6)

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via CodeSandbox.
View the console at https://codesandbox.io/s/y0r3kl6x1j. On mount, you'll see:

Warning: Legacy context API has been detected within a strict-mode tree

and after clicking "Toggle in Prop", you'll see:

findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

What is the expected behavior?
No warning should be logged.

Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
These warnings are new as of React 16.6.

[jquense]

Thanks! I wouldn't consider this a bug since it's a deprecation warning but we'll do what we can to use refs if feasible

[edmorley]

Please can this be reopened until it's fixed? :-)

The warning makes using <StrictMode> very noisy, which effectively blocks us using it to prevent other issues.

[ekohanyi]

This warning has now stopped transitions from working in strict mode, not just showing in the console but continuing to operate. So it makes it difficult or impossible to add new animations without turning off strict mode on local environments.

react: v16.6.3
react-transition-group: v2.3.1

[jquense]

The warning can't stop transition s it's just a console.log not a thrown error

[ekohanyi]

It might be something else but we noticed the transitions weren't firing and then when we turned off strict mode it started animating properly again, so seems like something is getting stopped up related to it

[Jessidhia]

StrictMode doesn't only print warnings, it also double-renders all components in development.

[ekohanyi]

@Kovensky Ohh okay, good to know, that must be what's causing the issue then. Thank you! I learned something new today haha

[Iverson]

Is there any progress here? It's really painful to work with console in <StrictMode>.

[sseppola]

I haven't been able to wrap my head around all the considerations this lib takes, but to move the conversation forward:

1) Are there any specific challenges to use the new context api?

From what I could gather by browsing the source code, maybe it could cause problems for nested transitions? (https://github.com/reactjs/react-transition-group/blob/master/src/Transition.js#L150)

The Transition would have to consume the context via a render callback, so maybe we could just wrap the exported component so that it would receive transitionGroup as a prop instead, eg:

export default function (props) {
  return (
    <TransitionContext.Consumer>
      {(transitionGroup) => <Transition {...props} transitionGroup={transitionGroup} />}
    <TransitionContext.Consumer>
}

Are there performance considerations I'm missing? Backwards compatibility with React 15?

2) Are there any specific challenges to use refs in this case?

I couldn't spot anything right now.

[thaggie]

This pull request should fix the findDOMNode warning - #486