`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

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

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

Comments

[Joe Lloyd]

probably an old lib. what does the stack trace say?

[B--rian]

Yeah, I am using antd in version 2.x and I cannot change that due to architectural issues. @JoeLloyd See stack trace in my edit.

[DJ2]

As Joe said above, it's almost certainly antd using cWM. I'm curious to what architectural issues you'd run into by updating antd? It seems to be an open issue on github regarding outdated lifecycle methods github.com/ant-design/ant-design/issues/9792

[B--rian]

@DJ2: It is our internal architecture which does not work with Antd3.

[William Jockusch]

For what it's worth, if I load this very page with my console open, I see warnings about componentwillmount. I imagine this may no longer be true after SO does some updates somewhere.

[Uddesh Jain]

In my case, emotion styled component is causing this warning. I hope they will update soon.

[Onkeltem]

Thanks. But I would expect to see some more elaborate answer, describing an algorithm of finding the culprits. As was mentioned in the question, the output of the warning is not very useful.

[Matt Croak]

@Onkeltem a algorithm to find which library is using them? I’m sure how that would be done unless you have access to all of the external libraries source code and can crawl all of them to find instances of componentWillMount. According to the OP’s output, the issue could be with bootstrap (see end of further details).

[Harshal Mahajan]

@MattCroak is there any way by which we can identify the library which is causing these warnings?

[Matt Croak]

@HarshalMahajan if you look at my comment above I talk about what an algorithm to search this might entail and I’m not sure if it’s been achieved yet. If you check the console it might have more information but I’m not sure how to target the troublemakers without upgrading packages or researching them more to see what they use.