How to fix findDOMNode is deprecated and will be removed in React

What this error means

The "findDOMNode is deprecated" warning indicates that your React application is using ReactDOM.findDOMNode(), a legacy API that was deprecated in React 16.6.0 (October 2018) and completely removed in React 19. This method was originally designed to find the browser DOM node for a React class component instance by searching the component tree. React deprecated findDOMNode because it was slow to execute, fragile to refactoring, only returned the first child element, and broke abstraction levels by allowing parent components to reach into child component internals. The warning becomes especially visible when using React.StrictMode, which intentionally surfaces deprecated patterns during development. In most cases, this warning appears not from your own code but from outdated third-party libraries that haven't migrated to modern React patterns. Common culprits include older versions of react-bootstrap, Material-UI, react-quill, react-draggable, and styled-components.

Typical symptoms

• Console warning: "findDOMNode is deprecated and will be removed in the next major release"
• Warning appears when running app with React.StrictMode enabled
• Stack trace points to third-party component libraries like react-bootstrap, Material-UI, or react-quill
• Warning message includes "add a ref directly to the element you want to reference"
• Application still works normally despite the warning
• Multiple warnings appear if the deprecated method is called frequently
• Warning disappears when StrictMode is removed (but underlying issue remains)

Common causes

1. Third-party libraries using outdated React patterns (most common - affects react-bootstrap, Material-UI, react-quill, react-draggable, styled-components)
2. Legacy class components in your codebase directly calling ReactDOM.findDOMNode()
3. Old component code written before React 16.3 when refs were introduced
4. Components accessing DOM nodes through component instances instead of refs
5. Animation or transition libraries that manipulate DOM nodes directly
6. Code migrated from older React versions without updating deprecated APIs
7. Using React 19 which completely removed the findDOMNode method
8. Wrapper components that need to measure or manipulate child DOM nodes

How to fix "findDOMNode is deprecated and will be removed"

# Check for outdated packages
npm outdated

# Update specific package
npm update react-bootstrap

# Or update to latest major version
npm install react-bootstrap@latest

npm install @mui/material@latest @mui/styles@latest

import { findDOMNode } from 'react-dom';

function AutoselectingInput() {
  useEffect(() => {
    const input = findDOMNode(this);
    input.select();
  }, []);
  return <input defaultValue="Hello" />
}

import { useRef, useEffect } from 'react';

function AutoselectingInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.select();
  }, []);

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

import { findDOMNode } from 'react-dom';

class MyComponent extends React.Component {
  componentDidMount() {
    const node = findDOMNode(this);
    node.scrollIntoView();
  }

  render() {
    return <div>Content</div>;
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.divRef = React.createRef();
  }

  componentDidMount() {
    this.divRef.current.scrollIntoView();
  }

  render() {
    return <div ref={this.divRef}>Content</div>;
  }
}

import { forwardRef, useRef } from 'react';

// Component that forwards refs
const CustomInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

// Parent component using the forwarded ref
function ParentComponent() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

// index.js - Before
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// After (temporary workaround)
root.render(<App />);

// Only wrap parts of your app that don't use problematic libraries
function App() {
  return (
    <div>
      <ProblematicComponent /> {/* Outside StrictMode */}
      <React.StrictMode>
        <YourModernComponents />
      </React.StrictMode>
    </div>
  );
}

Advanced notes

Frequently asked questions

What does "findDOMNode is deprecated and will be removed" mean?

0 (October 2018) and completely removed in React 19. This method was originally designed to find the browser DOM node for a React class component instance by searching the component tree. React deprecated findDOMNode because it was slow to execute, fragile to refactoring, only returned the first child element, and broke abstraction levels by allowing parent components to reach into child component internals.

How do I fix "findDOMNode is deprecated and will be removed"?

This warning appears when your code or a third-party library uses the deprecated ReactDOM.findDOMNode() method, which was removed in React 19. The solution is to replace findDOMNode with direct DOM refs using useRef or createRef.

What causes "findDOMNode is deprecated and will be removed"?

Third-party libraries using outdated React patterns (most common - affects react-bootstrap, Material-UI, react-quill, react-draggable, styled-components) Legacy class components in your codebase directly calling ReactDOM.findDOMNode() Old component code written before React 16.3 when refs were introduced

Is the "findDOMNode is deprecated and will be removed" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?

  How to fix "forwardRef render functions accept exactly two parameters" in React

  LOW

• Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

  Rendered fewer hooks than expected

  HIGH

• forwardRef cannot be used with connect() from react-redux

  forwardRef cannot be used with connect() from react-redux

  MEDIUM

• React.FC expects children prop to be defined

  React.FC no longer includes implicit children prop

  LOW

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation
• 📖
  React 19 Upgrade Guide - findDOMNode Removal(Official Docs)
• 📖
  React 18 Documentation - findDOMNode Reference(Official Docs)
• 🐙
  React 19 Removal of ReactDOM.findDOMNode(GitHub)
• React warning: findDOMNode is deprecated in StrictMode (2 solutions)
• Getting rid of findDOMNode in your React application
• 🐙
  react-bootstrap: findDOMNode is deprecated in StrictMode(GitHub)
• 🐙
  react-quill: findDOMNode is deprecated and will be removed(GitHub)
• Fix React Warning: findDOMNode is deprecated in StrictMode