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

[ybiquitous]

@jquense Can you close this issue?

[hlehmann]

There is still the findDOMNode issue and using ForwardRef would cause a breaking change, nonetheless React.ConcurrentMode will require it.

[chybisov]

Is there any progress here after one year? It's still really painful see these errors in <StrictMode>

[JSteunou]

#514 might be a could transitional solution, please consider it :)

[IrvingArmenta]

Is there any progress here? It's still really painful see these errors in

[3limin4t0r]

For those annoyed by the warning in strict mode. If you don't use the newest React features you could lower the React version to 16.5. The warning is introduced in version 16.6.

[silvenon]

We're looking for a workaround for this, feel free to voice your opinions in the RFC: #606

[jquense]

🎉 This issue has been resolved in version 4.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[alecmarcus]

Seems the issue may still be present with SwitchTransition.

I do have 4.4.1 installed via npm.

index.js:1 Warning: 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. Learn more about using refs safely here: 
https://fb.me/react-strict-mode-find-node
    in div (created by About)
    in About (created by Context.Consumer)
    in Route (created by D)
    in D (created by Context.Consumer)
    in S (created by Context.Consumer)
    in S (created by Context.Consumer)
    in Route (created by k)
    in k (created by Routes)
    in Switch (created by Routes)
    in Transition (created by CSSTransition)
    in CSSTransition (created by Routes)
    in SwitchTransition (created by Routes)
    in section (created by Default)
    in main (created by Default)
    in section (created by Default)
    in Default (created by Routes)
    in Switch (created by Routes)
    in j (created by Routes)
    in Routes (created by App)
    in App
    in Router (created by BrowserRouter)
    in BrowserRouter
    in ApolloProvider
    in StrictMode```

[pmoons]

@alecmarcus Are you using the the new nodeRef prop that was introduced in version 4.4.0? Using the prop for me removed the console error.

Short write up about this prop in the CHANGELOG

[alecmarcus]

@pmoons Wonderful, that was it (my bad for not reading). Thanks for the help!

[evoyy]

I appreciate the work that has been done on this package, but this issue should not be closed. After upgrading to 4.4.1 I still get the warning when I enable strict mode. I saw the changelog entry that explains the workaround of passing a nodeRef prop. However, the default behaviour of this package still produces the warning in strict mode and hence this issue is not technically resolved, only a workaround has been provided.

[silvenon]

It's not a workaround, you have to explicitly assign a node to react-transition-group, otherwise it cannot avoid using findDOMNode. Read the official explanation for deprecating findDOMNode to understand why.

We would've loved to solve this without people having to update their code, but it's just not possible.

[LucaPizzagalli]

I think the documentation should be updated, too.
This example produces the "findDOMNode is deprecated in StrictMode" warning, and it's still not clear to me how to solve the issue.

[silvenon]

They are most probably using the outdated version of react-transition-group, so you have no control over that. I wouldn't suggest for them to upgrade yet, though, we complete the roadmap described in #630.

Regarding the documentation, please describe what specifically you believe needs to be updated in a new issue.