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: React.ReactInstance | null | undefined): Element | null | TextfindDOMNode } from "react-dom";
class class AutoSelectingInputAutoSelectingInput extends class Component<P = {}, S = {}, SS = any>Component {
AutoSelectingInput.componentDidMount(): voidCalled 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 | null | TextfindDOMNode(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(): voidMakes 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(): voidCalled 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 | nullThe current value of the ref.current;
const input: HTMLInputElement | nullinput?.HTMLInputElement.select(): voidMakes 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> | undefinedAllows 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).ref={this.AutoSelectingInput.inputRef: React.RefObject<HTMLInputElement>inputRef} React.HTMLAttributes<HTMLInputElement>.defaultValue?: string | number | readonly string[] | undefineddefaultValue="Hello" />;
}
}