CSSTransition using findDOMNode which is deprecated in React 16.13.1

[david-forster10]

A warning regarding the deprecation of findDOMNode is shown when using the SwitchTransition & CSSTransition in Strict mode (React v16.13.1).

What is the current behaviour?

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

What is the expected behavior?

No console messages

Could you provide a CodeSandbox demo reproducing the bug?

Can be recreated using the demo sandbox and changing the React version to 16.13.1.

[mznet]

@david-forster10 Version 4.4.0 have already resolved using findDOMNode.

[david-forster10]

@mznet Running on the same CodeSandbox, v4.4.0 same result

[david-forster10]

Looking at the stack trace, the issue is actually occurring at the Transition object which is created by the CSSTransition. There are 3 references to the findDOMNode method still in that file:

Line 229

Line 260

Line 321

[david-forster10]

Looking at the stack trace, the issue is actually occurring at the Transition object which is created by the CSSTransition. There are 3 references to the findDOMNode method still in that file:

Line 229

Line 260

Line 321

Adding in some cheap logging to find out where in the flow the error is thrown... I would guess it's Line 229 as the error is thrown before the transitions finish.

[nt4f04uNd]

I'm just wondering why would close the issue #429 when it is not resolved even with 4.4.1?

[pixel-fixer]

From 4.4.0 release notes:

react-transition-group internally uses findDOMNode, which is deprecated and produces warnings in Strict Mode, so now you can optionally pass nodeRef to Transition and CSSTransition, it's a ref object that should point to the transitioning child:

You can fix this like this

import React from "react"
import { CSSTransition } from "react-transition-group"

const MyComponent = () => {
  const nodeRef = React.useRef(null)
  return (
    <CSSTransition nodeRef={nodeRef} in timeout={200} classNames="fade">
      <div ref={nodeRef}>Fade</div>
    </CSSTransition>
  )
}

[nt4f04uNd]

I think the library must show it's own warning about this and not confuse people and make them search for the solution by themselves

[david-forster10]

I think to also avoid confusion, the demos (using the older version of the library) need to be updated to show the use of the refs to further reinforce the idea for people who skim the docs

[nt4f04uNd]

@jquense please consider our suggestion

[ahmedzubaca]

The solution proposed by @jquense removes warning, but also prevents animation to play.

[Samk13]

the solution of @pixel-fixer works for me, but when adding ref to a complex child component it will not work, you need to wrap your complex component with a div then the transition will play with no errors🙌🏼.
<Transition nodeRef={nodeRef} key={id} timeout={{ enter: 800, exit: 500 }}> <div ref={nodeRef}> 👈🏼 <CardItem/> </div> </Transition>

[ahmedzubaca]

Smak13, thank You so much, this works for me, too.