Deprecated lifecycle method warnings with React 16.9

[GreenGremlin]

The following warning is shown upon upgrading to React 16.9.0:

    Error: Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks 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: Select in src/tests.entry.js (line 294578)

[nukbal]

I've got similar warning related to this one

Warning: componentWillReceiveProps 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.
      * If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
      * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps 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: AutosizeInput, Select

[jairusd]

That means you have component using legacy lifecycle OR you are using a library which uses the legacy lifecycle, I don't see this as an issue, in fact, it is helpful to identify legacy code and warn you when you do use libraries that do still.

[TrySound]

@jairusd react-select is the library with legacy methods.

[rj-david]

@JedWatson, since react 16.9.0 started to show a warning for deprecated lifecycles, is it possible that you create a patch release with a quick fix of renaming the deprecated lifecycles in order to remove the warning?

I've created a pull request (PR) for this: #3716

Note that this is just a quick fix for now to remove the warnings. It still requires a fix to move the code from the deprecated lifecycles to other related lifecycles.

Thanks

[jairusd]

oh sorry guys i was drunk when i made that comment

[tonix-tuft]

What about running npx react-codemod rename-unsafe-lifecycles, will it work for libraries installed in node_modules?

[rj-david]

@tonix-tuft, I doubt if it would. If it does, it will be overwritten on your next npm ci or npm install

[rj-david]

By the way, my PR was merged to master. Just waiting for the next release

[alfred-pb]

@rj-david thanks!

[metamn]

@tonix-tuft I ran npx react-codemod rename-unsafe-lifecycles where the warning was shown node_modules/react-dom ... but no results:

cs@cs-swift:~/work/react-best-practices/node_modules/react-dom$ npx react-codemod rename-unsafe-lifecycles
? On which files or directory should the codemods be applied? .
? Which dialect of JavaScript do you use? JavaScript
Executing command: jscodeshift --verbose=2 --ignore-pattern=**/node_modules/** --parser babel --extensions=jsx,js --transform /home/cs/.npm/_npx/31217/lib/node_modules/react-codemod/transforms/rename-unsafe-lifecycles.js .
Processing 36 files... 
Spawning 3 workers...
Sending 12 files to free worker...
Sending 12 files to free worker...
Sending 12 files to free worker...
 SKIP index.js
 SKIP profiling.js
 SKIP server.js
 SKIP server.node.js
 SKIP server.browser.js
 SKIP test-utils.js
 SKIP unstable-fizz.browser.js
 SKIP unstable-fizz.js
 SKIP unstable-fizz.node.js
 SKIP unstable-native-dependencies.js
 SKIP umd/react-dom-unstable-fizz.browser.development.js
 SKIP cjs/react-dom-unstable-fizz.browser.development.js
 SKIP umd/react-dom-unstable-fizz.browser.production.min.js
 SKIP cjs/react-dom-unstable-fizz.browser.production.min.js
 SKIP cjs/react-dom-unstable-fizz.node.development.js
 SKIP cjs/react-dom-unstable-fizz.node.production.min.js
 SKIP umd/react-dom-test-utils.production.min.js
 SKIP cjs/react-dom-test-utils.production.min.js
 SKIP umd/react-dom-unstable-native-dependencies.production.min.js
 SKIP cjs/react-dom-unstable-native-dependencies.production.min.js
 SKIP cjs/react-dom-server.browser.production.min.js
 SKIP umd/react-dom-server.browser.production.min.js
 SKIP cjs/react-dom-server.node.production.min.js
 SKIP cjs/react-dom-test-utils.development.js
 SKIP umd/react-dom-test-utils.development.js
 SKIP cjs/react-dom-unstable-native-dependencies.development.js
 SKIP umd/react-dom-unstable-native-dependencies.development.js
 SKIP cjs/react-dom-server.browser.development.js
 SKIP cjs/react-dom.profiling.min.js
 SKIP cjs/react-dom.production.min.js
 SKIP cjs/react-dom-server.node.development.js
 SKIP umd/react-dom.production.min.js
 SKIP umd/react-dom.profiling.min.js
 SKIP umd/react-dom-server.browser.development.js
 SKIP cjs/react-dom.development.js
 SKIP umd/react-dom.development.js
All done. 
Results: 
0 errors
0 unmodified
36 skipped
0 ok
Time elapsed: 17.457seconds 

[ShajiKesavan]

even using this "npx react-codemod rename-unsafe-lifecycles" ,the warning still persists..what should i do to avoid this warning?

[rj-david]

@gwyneplaine when can we expect this for a new release? Thanks

[zhenyu0519]

the latest version of react-moment is also a library with this issue

[rj-david]

@zhenyu0519, is that package a dependency of this package?

[zachsa]

oops. wrongs repo...

[zachsa]

@zhenyu0519, is that package a dependency of this package?

Sorry. I don't know what I was thinking. It's not.

[graue]

Thanks @gwyneplaine for merging #3716. Would you mind cutting a release with the change?

Also, is there any chance you're in touch with Jed and could help us get a similar fix for his other project, JedWatson/react-input-autosize#163?

[chaudharykiran]

I have same warning. I re-implement my component using react hooks but the warning is still showing. Anyone have same issue. These warning should not be shown in functional component.

[flyon]

looking forward to see #3716 published to npm for the time being so my console is less cluttered! tnx everyone!

[blairmorris]

+1 to hoping for a release soon to get rid of these. We've cleared out all of ours in our app, but waiting for all these dependencies to catch up so I can reclaim my console again.

[denyo]

I just forked the repo and published a new package: https://www.npmjs.com/package/@denyo/react-select

[ranneyd]

@denyo your solution has this same issue:

#3487 (comment)

So we need to fix this one too:
https://github.com/JedWatson/react-input-autosize

[ghost]

Hmmm, so the suggestion is to leave the original 17K star react-select with a trickle of support and jump over to a fork which will itself will incorporate a temporary fork of react-input-autosize which will receive how much maintenance?

I personally will either wait on this repo to get over this hump or remove my dependency on react-select altogether. But that is just me.

[ranneyd]

@leantide my idea is switch to the fork with the fix in it, hard-code the version number (no ^) so aren't subsequent updates I accidentally install, monitor this (and the other) threads, and when they finally actually fix this repo switch back.

#javascriptdevelopment

[ghost]

@ranneyd I wish you all the best. This is about the 5th library I've run into fundamental maintenance issues with. I am slowly learning that not all github stars are equal as many can be legacy stars. I need to reduce my dependencies.

[ranneyd]

@leantide I feel your pain, and I'm considering something similar. It's unfortunate because this is a very nice lib otherwise.

[ranneyd]

JedWatson/react-input-autosize#166

[ghost]

I was able to fix this by migrating my project away from react-select. But it is not without sadness.

[marksark]

@JedWatson any updates on this issue? I don't think it's sustainable to keep this for a long term project if this issue won't be resolved :/

[aodr3w]

Nope , still waiting , got the same error in my project

[JedWatson]

Hey everyone, sorry for the delay here. fwiw we do put a lot of time into maintaining this project, although this particular issue with the warnings in console caught us up.

The warnings should have been fixed comprehensively in the latest releases of both react-select and react-input-autosize. If you're still seeing problems, maybe try ensuring you've updated your dependencies in your package.json (and make sure you don't have old versions of either library specified in your lockfiles - that can cause older versions to be installed when you are expecting to be on latest)