React warning: findDOMNode is deprecated in StrictMode (2 solutions)

Updated: March 6, 2024 By: Guest Contributor 9 comments

The Problem

When working with React.js, you will probably come across an annoying warning:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

The Root Of The Problem

If you follow the link provided in the warning, you’ll see some helpful information from the React team:

React used to support findDOMNode to search the tree for a DOM node given a class instance. Normally you don’t need this because you can attach a ref directly to a DOM node.

But if you didn’t use findDOMNode, why does this still happen?

In many cases, the culprit that causes the annoying warning is not you or your code but some components from a third-party library used in your project. These libraries are not faulty, but simply they have not been updated to the newer version in time. Among these, there are very famous and popular libraries like React Bootstrap, React Transition Group, React Draggable, etc.

React Transition Group still uses findDOMNode somewhere

In the future, when the teams behind these libraries make changes, everything will be resolved automatically. No action is required from you at this time. However, if you find these warnings too annoying and annoying, you can resolve them using one of the following solutions listed below.

Solutions

1. Remove React.StrictMode in index.js

This method is simple and you only need to do it once in a single place. Go to your ./src/index.js file and change it from this:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

to this:

ReactDOM.render(
    <App />
  document.getElementById('root')
);

Note that StrictMode is a tool for highlighting potential problems in a React application. It activates additional checks and warnings such as:

  • Identifying components with unsafe lifecycles
  • Warning about legacy string ref API usage
  • Warning about deprecated findDOMNode usage
  • Detecting unexpected side effects
  • Detecting legacy context API

Strict mode checks are run in development mode only; they do not impact the production build.

2. Using Ref

This method is different for each library and will take more time and effort than the first method. However, the upside is that you can still get other warnings from the strict mode for debugging.

For example, with the React Draggable library:

const MyComponent = props => {
    const nodeRef = React.useRef(null);
    return (
        <Draggable nodeRef={nodeRef}>
            <div ref={nodeRef}>Example Target</div>
        </Draggable>
    );
}

Final Words

In this article, we had a look at the React findDOMNode warning and went over some approaches to get rid of it. If you’d like to learn more new and fascinating things about modern React, take a look at the following articles:

You can also check our React category page and React Native category page for more tutorials and examples.

9 Comments
Inline Feedbacks
View all comments
ash
ash
1 year ago

good

Gladson Reis
Gladson Reis
1 year ago

Perfect !!

Yumna
Yumna
1 year ago

Using ref works perfectly! Thank you for the help

weilan
weilan
2 years ago

Thank you!!! Exactly the issue I had with my draggable

Kirill
Kirill
2 years ago

thnks so much, u r the best

A Goodman
Admin
A Goodman
2 years ago
Reply to  Kirill

You’re welcome

wejder
wejder
3 years ago

thanks

Siva Krishna
Siva Krishna
3 years ago

nice its working to remove react strict mode in index.js

A Goodman
Admin
A Goodman
3 years ago
Reply to  Siva Krishna

Yes. It’s a trade-off.

Related Articles