Skip to content
masterclassBuddyTech Buzz5 fresh blogs · 5:00 AM IST

React 19+ · Function

findDOMNode

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.

Since
16.6.0

How it works

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.

Syntax

findDOMNode(componentInstance)

Parameters

NameTypeDescription
componentInstanceComponent instanceAn instance of the Component subclass, such as this inside a class component.

Returns

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.

Key points

  • It maps a class-component instance to its nearest rendered browser DOM node.
  • No DOM node is returned when the rendered result is null or false.
  • A string result is represented by a browser text node.
  • For arrays or Fragments, the result corresponds to the first non-empty child.
  • The recommended replacement is a direct ref targeting the required DOM element.

Common mistakes

  • Calling it before the class component is mounted throws an exception.
  • If a child later renders a different node, the call does not notify you about the change.
  • The API does not accept function components.
  • When multiple children are returned, only the first non-empty child's DOM node is selected.

Example: Use a DOM ref instead

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.

When to use it

Legacy compatibility

Maintaining older class-component code that still calls the legacy API.

Migration to refs

Replacing indirect DOM lookup with an explicit element reference.

Interview questions

QWhat does findDOMNode return?

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.

QWhat are its usage constraints?

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.

QHow should React 19 code handle findDOMNode?

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.

  • createRef
  • Component
  • react-dom
  • useRef

Source: findDOMNode. Checked 2026-10-15.