How do I fix warning findDOMNode is deprecated in StrictMode warning
The Problem When working with React.js, you will probably come across an annoying warning:
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> ); }
0 Comments