Warning: componentWillUpdate when using themes

[sonapraneeth-a]

Description

Below is the warning I get when I run

yarn start

from the themes directory in gatsby repository

warn Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move data fetching code or side effects to componentDidUpdate.
• Rename componentWillUpdate to UNSAFE_componentWillUpdate 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.

Steps to reproduce

Clear steps describing how to reproduce the issue. Please please please link to a demo project if possible, this makes your issue much easier to diagnose (seriously).

$ git clone https://github.com/gatsbyjs/gatsby.git
$ cd gatsby/themes
$ yarn install
$ yarn start

Expected result

Warning should not occur

Actual result

warn Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

• Move data fetching code or side effects to componentDidUpdate.
• Rename componentWillUpdate to UNSAFE_componentWillUpdate 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.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

gatsby info --clipboard

System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i5-6300U CPU @ 2.40GHz
Binaries:
Yarn: 1.17.3 - C:\Program Files (x86)\Softwares\Yarn\bin\yarn.CMD
npm: 6.11.2 - C:\Program Files\Softwares\nodejs\npm.CMD
Browsers:
Edge: 44.17763.1.0

[lannonbr]

I haven't dived into why this is occuring, but I bet it is very similar to #17865 that some dependency is internally using that lifecycle hook so they need to update it. I could look into this later to pinpoint what is causing it.

[jonniebigodes]

@sonapraneeth-a not only on themes, but some packages that use that react api hook, need to be updated. While triaging some other issues, i've encountered that same warning, I think that the react version was updated recently and it led to that issue and the one that @lannonbr mentioned, i think this pull request #17959 introduced the warning

[sonapraneeth-a]

There seems to be only one occurrence of componentWillUpdate in develop.js

Also, this issue seems to occur currently with gatsby develop and not with gatsby build.

Currently, I'm not sure what this component is intending to do. If someone can help me, may be I can fix this in a PR?

[lannonbr]

@sonapraneeth-a it looks like that component is for the CLI where at the bottom you can see the app name and how many pages exist when you run gatsby develop.

It would be great to get a PR. If you're interested I can assign this to you.

From what it looks like, the changes needed are likely just to move this from componentWillUpdate to componentDidUpdate as shown in this blogpost: https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#invoking-external-callbacks

[sonapraneeth-a]

I can create a PR for this. I'll read on how to make changes as per the blog post shared.