In reactjs, findDOMNode is deprecated in StrictMode error

Question

I am newbie in React.js and trying to use BackTop component in Ant Design library. https://ant.design/components/back-top/

This component works fine. But I found a error message in chrome browser console.

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DomWrapper 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

This is my code below.

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css'; 
import './assets/scss/global.scss';
import App from './App';

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

App.js

import React from "react";
import { Route, Switch, BrowserRouter as Router } from "react-router-dom";
import Header from './layouts/Header'; 
import Home from "./pages/Home";
import About from "./pages/About"; 
import { BackTop } from 'antd';

class App extends React.Component{
  render(){
    return (
      <Router>
        <Header/>
        <div className="container">
          <div className="content">
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/about" component={About} /> 
            </Switch> 
          </div>
        </div> 
        <BackTop /> 
      </Router>
    )
  }
} 
export default App;

What do I need to change to fix the error ?

findDOMNode has been deprecated. You should not use it. It seems like some library is still using findDOMNode. So, you should just ignore this as it will be fixed when the library authors update the code. See this — Ajeet Shah

Julez Julez · Accepted Answer · 2021-11-10T12:58:45

It's because of the library ant-design you are using. Some underlying dependencies of ant-design are using findDOMNode.

There is a big thread about this issue on their github: here

It seems they're not planning to fix it soon.

As a workaround, I am adding this at the root file. I'm suppressing the warning like so:

// eslint-disable-next-line
const consoleError = console.error.bind(console);
// eslint-disable-next-line
console.error = (errObj, ...args) => {
  if (
    (process.env.NODE_ENV === 'development' && typeof errObj.message === 'string' && args.includes('findDOMNode')
  ) {
    return;
  }
  consoleError(errObj, ...args);
};

I know this is not a fix, but at least my console is not bloated with findDOMNode messages. Until And-Design fixes this, this will do.

In reactjs, findDOMNode is deprecated in StrictMode error

1 Answers