title: `componentWillMount` warnings visible even though 'componentWillMount' is not explicitly used
body: <p>In my code, <strong>I do not have any explicit uses of <code>componentWillMount</code></strong>, but still I am seeing a couple of warnings when running <code>webpack</code>.</p>
  
  <blockquote>
    <p>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.</p>
    
    <ul>
    <li>Move code with side effects to componentDidMount, and set initial state in the constructor.</li>
    <li>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 <code>npx react-codemod rename-unsafe-lifecycles</code> in your project source folder.</li>
    </ul>
    
    <p>Please update the following components: foo, bar</p>
  </blockquote>
  
  <p>I did run the suggested <code>npx react-codemod rename-unsafe-lifecycles</code>, but the warning did not go away, but only changed its wording to</p>
  
  <blockquote>
    <p>react-dom.development.js:12386 Warning: componentWillMount has been renamed, and is not recommended for use. [...]</p>
  </blockquote>
  
  <p>Here, <code>foo</code> and <code>bar</code> are both custom components our team wrote, and some components of external libraries. A full search of the Visual Studio solution for <code>componentWillMount</code> doese not give me any result. Could somebody please explain me the what could I have done wrong?  </p>
  
  <p>I read at <a href="https://stackoverflow.com/questions/49206280/componentwillmount-is-deprecated-and-will-be-removed-in-the-next-major-version-0">another question</a> a comment stating</p>
  
  <blockquote>
    <p>I don't have any explicit place with <code>componentWillMount</code>, but I do have [...] a line of code after the constructor with <code>state={ tabindex:0 }</code> How do I "move" that into the constructor? </p>
  </blockquote>
  
  <p>The answer was to write
  <code>constructor(props) {super(props); this.state = { tabindex:0 }}</code>. Can somebody explain what was going on here, please? What kind of patterns do I have to look for in our code?</p>
  
  <h2>Further details</h2>
  
  <pre><code>    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
  </code></pre>
  
  <h2>Related</h2>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/49152988/componentwillmount-warning">ComponentWillMount warning</a> </li>
  <li><a href="https://reactjs.org/docs/react-component.html#componentwillmount" rel="noreferrer">https://reactjs.org/docs/react-component.html#componentwillmount</a> </li>
  </ul>