no-find-dom-node

react-dom/no-find-dom-node

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

// Problem: findDOMNode is deprecated and will be removed.
import React, { Component } from "react";
import { findDOMNode } from "react-dom";

class AutoSelectingInput extends Component {
  componentDidMount() {
    const input = findDOMNode(this);
    //            ^^^ 'findDOMNode' will be removed in a future version of React. Use the alternatives instead.
    if (input instanceof HTMLInputElement) {
      input.select();
    }
  }
  render() {
    return <input defaultValue="Hello" />;
  }
}

// Recommended: use createRef to access the underlying DOM node.
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" />;
  }
}

// Problem: findDOMNode is deprecated and does not work well with function components.
import { useEffect } from 'react';
import { findDOMNode } from 'react-dom';

function AutoSelectingInput() {
  useEffect(() => {
    const input = findDOMNode(this);
    input.select();
  }, []);

  return <input defaultValue="Hello" />;
}

// Recommended: use useRef to access the underlying DOM node.
import { useEffect, useRef } from 'react';

function AutoSelectingInput() {
  const ref = useRef(null);
  useEffect(() => {
    ref.current.select();
  }, []);

  return <input ref={ref} defaultValue="Hello" />;
}