`componentWillMount` warnings visible even though 'componentWillMount' is not explicitly used

Question

In my code, I do not have any explicit uses of componentWillMount, but still I am seeing a couple of warnings when running webpack.

react-dom.development.js:12386 Warning: componentWillMount has been renamed, and is not recommended for use. See https:/fb.me/react-unsafe-component-lifecycles 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-lifecycles in your project source folder.

Please update the following components: foo, bar

I did run the suggested npx react-codemod rename-unsafe-lifecycles, but the warning did not go away, but only changed its wording to

react-dom.development.js:12386 Warning: componentWillMount has been renamed, and is not recommended for use. [...]

Here, foo and bar are both custom components our team wrote, and some components of external libraries. A full search of the Visual Studio solution for componentWillMount doese not give me any result. Could somebody please explain me the what could I have done wrong?

I read at another question a comment stating

I don't have any explicit place with componentWillMount, but I do have [...] a line of code after the constructor with state={ tabindex:0 } How do I "move" that into the constructor?

The answer was to write constructor(props) {super(props); this.state = { tabindex:0 }}. Can somebody explain what was going on here, please? What kind of patterns do I have to look for in our code?

Further details

    printWarning    @   react-dom.development.js:12386 lowPriorityWarningWithoutStack  @   react-dom.development.js:12407 ./node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings   @   react-dom.development.js:12577 flushRenderPhaseStrictModeWarningsInDEV @   react-dom.development.js:25641 commitRootImpl  @   react-dom.development.js:24871 unstable_runWithPriority    @   scheduler.development.js:815 runWithPriority$2   @   react-dom.development.js:12188 commitRoot  @   react-dom.development.js:24865 finishSyncRender    @   react-dom.development.js:24251 performSyncWorkOnRoot   @   react-dom.development.js:24223 scheduleUpdateOnFiber   @   react-dom.development.js:23590 scheduleRootUpdate  @   react-dom.development.js:26945 updateContainerAtExpirationTime @   react-dom.development.js:26973 updateContainer @   react-dom.development.js:27075 (anonymous) @   react-dom.development.js:27663 unbatchedUpdates    @   react-dom.development.js:24375 legacyRenderSubtreeIntoContainer    @   react-dom.development.js:27662 render  @   react-dom.development.js:27756 ./src/index.tsx @   index.tsx:52 __webpack_require__ @   bootstrap:19 0   @   bundle.js:152632 __webpack_require__ @   bootstrap:19 (anonymous) @   bootstrap:83 (anonymous) @   bootstrap:83 

Related

• ComponentWillMount warning
• https://reactjs.org/docs/react-component.html#componentwillmount

Answer 1

You're getting this warning because componentWillMount is deprecated in newer React versions. If you're not using componentWillMount anywhere then one of your libraries is and it needs to be updated.

If it makes you feel better, your production build will not show these warnings in the console.

If you are unable to update libraries for whatever reason, you can try suppressing these errors in the console by putting something like console.warn = () => {} At the top of your App component but I wouldn't recommend this since then you won't be able to use console.warn later in your code. Best to just accept them as an annoyance until you're able to update your library.