`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.

Answer 2

If you want to use these methods, prefix the methods with UNSAFE_ . These methods are considered “unsafe” because the React team expect code that depends on these methods to be more likely to have bugs in future versions of React. So you can suppress the warning with UNSAFE_componentWillMount.

Answer 3

If you want to rename all deprecated lifecycles like componentWillMount or componentWillReceiveProps to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.