javascriptreactjsdraggablereact-strictmode

findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore which is inside StrictMode


Draggable package is causing an error in strict mode:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore 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/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage

Apparently they have never fixed it https://github.com/STRML/react-draggable/issues/440, do you have any nice/elegant solution?


Solution

  • According with official git repository on https://github.com/STRML/react-draggable/blob/v4.4.2/lib/DraggableCore.js#L159-L171

    /* If running in React Strict mode, ReactDOM.findDOMNode() is deprecated.
    * Unfortunately, in order for <Draggable> to work properly, we need raw access
    * to the underlying DOM node. If you want to avoid the warning, pass a `nodeRef`
    * as in this example:
    */
    
    function MyComponent() {
        const nodeRef = React.useRef(null);
        return (
            <Draggable nodeRef={nodeRef}>
                <div ref={nodeRef}>Example Target</div>
            </Draggable>
        );
    }
    
    /*
    * This can be used for arbitrarily nested components, so long as the ref ends up
    * pointing to the actual child DOM node and not a custom component.
    */
    

    it works!