Legacy compatibility
Maintaining older class-component code that still calls the legacy API.
React 19+ · Function
findDOMNode located the closest browser DOM node rendered by a mounted class-component instance. React 19 removed this deprecated legacy API; use a direct DOM ref instead.
findDOMNode(componentInstance) looks up the closest browser DOM node rendered by a mounted class-component instance. It cannot be used with function components, reports only the result at call time, and is unavailable in React 19 because React removed this deprecated legacy escape hatch.
findDOMNode(componentInstance)| Name | Type | Description |
|---|---|---|
componentInstance | Component instance | An instance of the Component subclass, such as this inside a class component. |
The closest browser DOM node within the supplied class-component instance; it returns null for null or false output and a text node for string output.
null or false.import { createRef, Component } from 'react';
class TextInput extends Component {
inputRef = createRef();
focus() {
this.inputRef.current?.focus();
}
render() {
return <input ref={this.inputRef} defaultValue="Hello" />;
}
}Use a ref on the specific DOM element instead of locating a descendant through the class instance.
Maintaining older class-component code that still calls the legacy API.
Replacing indirect DOM lookup with an explicit element reference.
It finds the closest browser DOM node associated with a mounted class-component instance. It returns null for a component rendering null or false, and a text node for a component rendering a string.
Follow-up: Why is it unsuitable for tracking changing output? It returns only the result from the instant it is called and provides no notification when a child later renders another node.
The instance must be a class component, commonly this, and the component must already be mounted. Calling it before mounting throws an exception.
Follow-up: What should replace it? Attach a ref directly to the particular DOM element you need, using createRef in a class component or a ref hook in a function component.
React 19 removed this deprecated API, so new code should not depend on it. Direct DOM refs are the documented alternative for managing a specific element.
Follow-up: Why is a direct ref better? It identifies the intended element explicitly instead of searching through a component's rendered output, which can change shape.
createRefComponentreact-domuseRef