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 | Text
findDOMNode } from "react-dom";
class class AutoSelectingInput
AutoSelectingInput 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 | null
input = function findDOMNode(instance: React.ReactInstance | null | undefined): Element | null | Text
findDOMNode(this);
// - The 'findDOMNode' will be removed in a future version of React. Use the the alternatives instead.
if (const input: Element | Text | null
input 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: HTMLInputElement
input.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.Element
render() {
return <JSX.IntrinsicElements.input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
input React.HTMLAttributes<HTMLInputElement>.defaultValue?: string | number | readonly string[] | undefined
defaultValue="Hello" />;
}
}
Passing
import React, { class Component<P = {}, S = {}, SS = any>
interface Component<P = {}, S = {}, SS = any>
Component } from "react";
class class AutoSelectingInput
AutoSelectingInput 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 | null
input = this.AutoSelectingInput.inputRef: React.RefObject<HTMLInputElement>
inputRef.React.RefObject<HTMLInputElement>.current: HTMLInputElement | null
The current value of the ref.current;
const input: HTMLInputElement | null
input?.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.Element
render() {
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).ref={this.AutoSelectingInput.inputRef: React.RefObject<HTMLInputElement>
inputRef} React.HTMLAttributes<HTMLInputElement>.defaultValue?: string | number | readonly string[] | undefined
defaultValue="Hello" />;
}
}