React warning: findDOMNode is deprecated in StrictMode (2021)

Last updated on January 4, 2021 Guest Contributor Loading... 3 comments

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 this still happens?

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 updated to the newer version in time. Among these, there are very famous and popular libraries like Material-UI, 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 strict mode.

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>
    );
}

The 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 about React or React Native, check our React category page and React Native category page for more tutorials and examples.

Subscribe
Notify of
guest
3 Comments
Inline Feedbacks
View all comments
wejder
wejder
4 months ago

thanks

Siva Krishna
Siva Krishna
5 months ago

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

A Goodman
Admin
A Goodman
5 months ago
Reply to  Siva Krishna

Yes. It’s a trade-off.

Related Articles