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.
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.
Check your browser console for the full warning message, which includes a stack trace showing which component is using findDOMNode.
If the warning points to a third-party library, check the package name and version. Common offenders include:
- react-bootstrap (fixed in v2.0+)
- Material-UI (fixed in v5+)
- react-quill (ongoing issue)
- styled-components (fixed in v5.1+)
- react-draggable (fixed in v4.4+)
If it's from your own code, note the component file and line number.
If the warning comes from a library, update it to the latest version:
# Check for outdated packages
npm outdated
# Update specific package
npm update react-bootstrap
# Or update to latest major version
npm install react-bootstrap@latestFor Material-UI, upgrade to MUI v5:
npm install @mui/material@latest @mui/styles@latestCheck the library's changelog or GitHub issues to verify findDOMNode has been removed in newer versions.
If you have functional components using findDOMNode, replace them with the useRef hook:
Before (deprecated):
import { findDOMNode } from 'react-dom';
function AutoselectingInput() {
useEffect(() => {
const input = findDOMNode(this);
input.select();
}, []);
return <input defaultValue="Hello" />
}After (modern approach):
import { useRef, useEffect } from 'react';
function AutoselectingInput() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.select();
}, []);
return <input ref={inputRef} defaultValue="Hello" />
}For class components, use createRef instead of findDOMNode:
Before (deprecated):
import { findDOMNode } from 'react-dom';
class MyComponent extends React.Component {
componentDidMount() {
const node = findDOMNode(this);
node.scrollIntoView();
}
render() {
return <div>Content</div>;
}
}After (modern approach):
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>;
}
}If you need to access a DOM node inside a custom component, use ref forwarding:
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>
);
}This allows parent components to access child DOM nodes without breaking encapsulation.
If you cannot update a library immediately (e.g., waiting for maintainer to fix the issue), you have temporary options:
Option 1: Remove StrictMode temporarily
// index.js - Before
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// After (temporary workaround)
root.render(<App />);Option 2: Apply StrictMode selectively
// 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>
);
}Note: These are temporary workarounds. The underlying issue still exists and will break when upgrading to React 19.
After making changes, confirm the warning is gone:
1. Restart your development server
2. Open browser console and clear it
3. Navigate through your app, especially pages using the previously problematic components
4. Ensure no findDOMNode warnings appear
If warnings persist, check for other libraries or components still using the deprecated API. Use the browser's console stack trace to identify them.
React 19 Compatibility: React 19 completely removed ReactDOM.findDOMNode, making this a breaking change rather than just a warning. If you're upgrading to React 19, all uses of findDOMNode must be replaced or your app will crash with "findDOMNode is not a function" errors.
Edge Case - Text Nodes: Some developers have reported that findDOMNode was useful for accessing text nodes, which don't support refs. In React 19, you'll need to restructure your component to wrap text in an element that can receive a ref, or use alternative approaches like callback refs with wrapper elements.
Performance Considerations: The original findDOMNode performed a tree traversal which was expensive. Using direct refs is significantly faster since React maintains the reference directly without searching.
Library Maintenance Status: As of 2024-2025, some popular libraries still haven't fully migrated away from findDOMNode (notably react-quill and some Material-UI sub-components). Check library GitHub issues for migration status and consider contributing fixes or switching to maintained alternatives.
Testing Library Impact: If you use @testing-library/react-testing-library, note that some internal utilities used findDOMNode. Ensure you're on version 14+ which removed this dependency.
Prevention Tips:
- Enable React.StrictMode during development to catch deprecated APIs early
- Regularly audit and update dependencies
- Prefer functional components with hooks over class components
- Use ESLint plugins like eslint-plugin-react to catch deprecated patterns
- When writing custom components, always expose ref forwarding if the component wraps DOM elements
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite