no-find-dom-node

Full Name in eslint-plugin-react-dom

react-dom/no-find-dom-node

Full Name in @eslint-react/eslint-plugin

@eslint-react/dom/no-find-dom-node

Features

🔍

Presets

dom
recommended
recommended-typescript
recommended-type-checked

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, { Component } from "react";
import { findDOMNode } from "react-dom";
 
class AutoSelectingInput extends Component {
  componentDidMount() {
    const input = findDOMNode(this);
    //            ^^^^^^^^^^^^^^^^^
    //            - The 'findDOMNode' will be removed in a future version of React. Use the the alternatives instead.
    if (input instanceof HTMLInputElement) {
      input.select();
    }
  }
  render() {
    return <input defaultValue="Hello" />;
  }
}

Passing

import React, { Component } from "react";
 
class AutoSelectingInput extends Component {
  inputRef = React.createRef<HTMLInputElement>();
 
  componentDidMount() {
    const input = this.inputRef.current;
    input?.select();
  }
 
  render() {
    return <input ref={this.inputRef} defaultValue="Hello" />;
  }
}