React-transition-group: React deprecated method: deprecated findDOMNode usage

Created on 23 Mar 2021 · 3Comments · Source: reactjs/react-transition-group

Hi,
I opened this issue to report you a bug on your react-transition-group module. Methods to interact with the DOM and the virtual DOM in React has changed and since this update React has done, when we use transitions by the way of react-transition-group. The error occurred when the transition entered into the DOM.

We have got this following error in the console of the web browser: 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://reactjs.org/link/strict-mode-find-node.
Screenshot_2

I hope you will fix this issue quickly!

Source

Kylian030903

👍1

Most helpful comment

@koba04 I stand corrected both element (Transition and inner animated element

in the example) must have nodeRef and then it will be ok:

    <CSSTransition 
nodeRef={nodeRef}  <----------------------
in timeout={200} classNames="fade">
      <div 
ref={nodeRef} <----------------------
>Fade</div>

This issue can be closed, and I am closing #709.

nicewaytodoit on 26 Mar 2021

👍3

All 3 comments

@Kylian030903 react-transition-group has added nodeRef as an alternative for findDONNode, so you can use nodeRef to avoid the warning.
https://github.com/reactjs/react-transition-group/blob/master/CHANGELOG.md#440-2020-05-05

koba04 on 23 Mar 2021

👍3

@koba04 when nodeRef is added animation will stop working #709.

nicewaytodoit on 26 Mar 2021

@koba04 I stand corrected both element (Transition and inner animated element

in the example) must have nodeRef and then it will be ok:

    <CSSTransition 
nodeRef={nodeRef}  <----------------------
in timeout={200} classNames="fade">
      <div 
ref={nodeRef} <----------------------
>Fade</div>

This issue can be closed, and I am closing #709.

nicewaytodoit on 26 Mar 2021

👍3

Was this page helpful?

0 / 5 - 0 ratings