Menu
I'm getting four big warnings that can not be minimized in my console. These warnings are from what I understand not because I have done anything wrong, but because react-router-dom and react-select use the deprecated componentWillMount function. How do I get rid of the warnings?
I have tried looking up the problem on this site, but the closest to a solution I have found is https://stackoverflow.com/a/49166225/12057512. Since the answer is from over a year ago I am wondering if this is still the case. Have these big/popular npm packages still not updated since then?
This is one of the warnings I get (the others are similar):
react-dom.development.js:11494 Warning: componentWillMount has been renamed, and is not recommended for use. See https:// fb . me/react-async-component-lifecycle-hooks for details.
- Move code with side effects to componentDidMount, and set initial state in the constructor.
- Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run
npx react-codemod rename-unsafe-lifecyclesin your project source folder.Please update the following components: BrowserRouter, Route, Router, Switch
(I actually tried to run "npx react-codemod rename-unsafe-lifecycles" but it made no difference)
I have no control over how these npm packages work internally, so I find it frustrating that I constantly get these warnings that I can not fix or remove.
892
The reason for this decision is twofold: All three methods are frequently use incorrectly and there are better alternatives. When asynchronous rendering is implemented in React, misuse of these will be problematic, and the interrupting behavior of error handling could result in memory leaks.
componentDidMount() is only called once, on the client, compared to componentWillMount() which is called twice, once to the server and once on the client. It is called after the initial render when the client received data from the server and before the data is displayed in the browser.
UNSAFE_componentWillMount() is invoked just before mounting occurs. It is called before render() , therefore calling setState() synchronously in this method will not trigger an extra rendering. Generally, we recommend using the constructor() instead for initializing state.
ReactJS componentDidMount() MethodThe componentDidMount() method allows us to execute the React code when the component is already placed in the DOM (Document Object Model). This method is called during the Mounting phase of the React Life-cycle i.e after the component is rendered.
The common way to fix this would be to update the affected libraries (as you say react-router and react-select). If these are being maintained, then they would release new versions that don't produce these warnings. If that is not an option for you, then I don't know, I don't think React has a way of suppressing specific warnings.
Note that the warnings are only shown in the dev build of React, they won't be shown in the production build of React (see DOCs).
93
The best I found..
const warn = console.warn;
function logWarning(...warnings){
let showWarning = true;
warnings.forEach(warning => {
if (warning.includes("UNSAFE_")) showWarning = false;
else if (warning.includes("SourceMap")) showWarning = false;
else if (warning.includes("DevTools")) showWarning = false;
});
if(showWarning) warn(...warnings);
}
console.warn = logWarning;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
