Resolving deprecation of findDOMNode in StrictMode

[mustaphaboudouch]

Problem

Getting this warning when using the deprecated function findDOMNode in StrictMode.
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

Suggested Solution

To resolve this warning, I suggest replacing findDOMNode with an innerRef. If the user passes a ref as a prop, we'll use it as the draggable ref. Otherwise, we'll create an internal ref and use it as the draggable ref.
We can then easily access the draggable DOM element : ref.current

Here is the implementation :

class DraggableCore extends React.Component<DraggableCoreProps, DraggableCoreState> {
	element: any =
		typeof this.props.innerRef === 'function'
			? { current: null }
			: React.createRef<HTMLElement>();

	// Now w'll use `getElement` instead of `findDOMNode`
	getElement = () =>
		(this.props.innerRef && typeof this.props.innerRef !== 'function'
			? this.props.innerRef
			: this.element
		).current;

	// Now if we need draggable DOM element :
	// const element = this.getElement();

	render() {
		const { innerRef, children, ...props } = this.props;

		return React.cloneElement(React.Children.only(children), {
			ref: typeof innerRef === 'function'
				? (current: HTMLElement) => {
					innerRef(current);
					this.element.current = current;
				}
				: innerRef || this.element,
			...props,
		});
	}
}

And here is a simple usage :

const myExternalRef = useRef(null)

// `innerRef` is optional. If it's not passed, DraggableCore will create an internal ref
<DraggableCore innerRef={myExternalRef}>
	<span>Test</span>
</DraggableCore>

[carlbrn]

#685
It's answered in changelog https://github.com/react-grid-layout/react-draggable/blob/master/CHANGELOG.md#440-may-12-2020

[STRML]

Closing, see nodeRef in README.

[rhyek]

This does not work when actually using React 19. More info here.