findDOMNode warnings with CSSTransition components

Question

"react": "^16.13.1" "react-transition-group": "^4.3.0"

  <React.StrictMode>
    <Router>
        <App />
    </Router>
  </React.StrictMode>

Hi, everyone.

I faced with findDOMNode warning and can't find the right solution on the internet.

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode...

This example I copied from off docs here and on click of the button, the same error appears.

const Toolbar = (props) => {
    const [inProp, setInProp] = useState(false);
    return (
        <div>
            <CSSTransition in={inProp} timeout={200} classNames="my-node">
                <div>
                    {"I'll receive my-node-* classes"}
                </div>
            </CSSTransition>
            <button type="button" onClick={() => setInProp(true)}>
                Click to Enter
            </button>
        </div>
    )
};

The solutions from the internet suggested trying createRef (I used usePef hook) but with Transitions, it didn't work.

It seems that React.StrictMode will throw a warning like this until the patch for this library will be merged, but still, I don't see the created issue

I will be grateful for any help or proposal of how to solve the issue

Ostracon

Answer 1

They fixed that bug from version 4.4.0.

To fix that can pass nodeRef to CSSTransition

const Toolbar = (props) => {
    const [inProp, setInProp] = useState(false);
    const nodeRef = useRef(null)
    return (
        <div>
            <CSSTransition in={inProp} nodeRef={nodeRef} timeout={200} classNames="my-node">
                <div ref={nodeRef}>
                    {"I'll receive my-node-* classes"}
                </div>
            </CSSTransition>
            <button type="button" onClick={() => setInProp(true)}>
                Click to Enter
            </button>
        </div>
    )
};

I hope that will be helpful.

Feliciafeliciano

You forgot to add ref={nodeRef} to the child component. – Wilinski

I think this snippet of code is incomplete, I tried it without success.. The right one is here #62187961 – Samothrace

I get no more warning but transition is gone? – Nautilus

Answer 2

For anyone using class-based components, it's recommended to use createRef instead.

Example:

const nodeRef = React.createRef(null);

I was having the same issue, and also as @warkentien2 said, you also need to add the reference in the child component, otherwise nothing happens.

Clarenceclarenceux

Would you have a code snippet for a class version? I have a parent class (app.js) that uses a shared modal dialog component (modalInfo.js). Both are class based components. Can't figure out where and how to implement the ref to avoid the findDOMNode warning - and what (and how) to wrap with the css transition! – Eliott