Rules
dom/no-find-dom-node

no-find-dom-node

Rule category

Restriction.

What it does

This rule disallows the use of findDOMNode.

Why is this bad?

This API will be removed in a future major version of React. See the alternatives.

Examples

Failing

import React, { class Component<P = {}, S = {}, SS = any>
interface Component<P = {}, S = {}, SS = any>
Component
} from "react";
import { function findDOMNode(instance: ReactInstance | null | undefined): Element | null | Text
@deprecatedSee https://react.dev/reference/react-dom/findDOMNode#alternatives
findDOMNode
} from "react-dom";
class class AutoSelectingInputAutoSelectingInput extends class Component<P = {}, S = {}, SS = any>Component { AutoSelectingInput.componentDidMount(): void
Called immediately after a component is mounted. Setting state here will trigger re-rendering.
componentDidMount
() {
const const input: Element | Text | nullinput = function findDOMNode(instance: React.ReactInstance | null | undefined): Element | Text | null
@deprecatedSee https://react.dev/reference/react-dom/findDOMNode#alternatives
findDOMNode
(this)
;
// - The 'findDOMNode' will be removed in a future version of React. Use the the alternatives instead. if (const input: Element | Text | nullinput instanceof var HTMLInputElement: {
new (): HTMLInputElement;
prototype: HTMLInputElement;
}
Provides special properties and methods for manipulating the options, layout, and presentation of <input> elements. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement)
HTMLInputElement
) {
const input: HTMLInputElementinput.HTMLInputElement.select(): void
Makes the selection equal to the current object. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/select)
select
();
} } AutoSelectingInput.render(): React.JSX.Elementrender() { return <JSX.IntrinsicElements.input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>input React.HTMLAttributes<HTMLInputElement>.defaultValue?: string | number | readonly string[] | undefineddefaultValue="Hello" />; } }

Passing

import React, { class Component<P = {}, S = {}, SS = any>
interface Component<P = {}, S = {}, SS = any>
Component
} from "react";
class class AutoSelectingInputAutoSelectingInput extends class Component<P = {}, S = {}, SS = any>Component { AutoSelectingInput.inputRef: React.RefObject<HTMLInputElement>inputRef = React.function React.createRef<HTMLInputElement>(): React.RefObject<HTMLInputElement>createRef<HTMLInputElement>(); AutoSelectingInput.componentDidMount(): void
Called immediately after a component is mounted. Setting state here will trigger re-rendering.
componentDidMount
() {
const const input: HTMLInputElement | nullinput = this.AutoSelectingInput.inputRef: React.RefObject<HTMLInputElement>inputRef.React.RefObject<HTMLInputElement>.current: HTMLInputElement | null
The current value of the ref.
current
;
const input: HTMLInputElement | nullinput?.HTMLInputElement.select(): void
Makes the selection equal to the current object. [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/select)
select
();
} AutoSelectingInput.render(): React.JSX.Elementrender() { return <JSX.IntrinsicElements.input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>input React.RefAttributes<HTMLInputElement>.ref?: React.LegacyRef<HTMLInputElement> | undefined
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
@see{@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
ref
={this.AutoSelectingInput.inputRef: React.RefObject<HTMLInputElement>inputRef} React.HTMLAttributes<HTMLInputElement>.defaultValue?: string | number | readonly string[] | undefineddefaultValue="Hello" />;
} }

Further Reading