React-select: Warning: componentWillReceiveProps has been renamed

[IftekherSunny]

Getting this warning !!!!

Warning: componentWillReceiveProps has been renamed

Screenshot

[eugenet8k]

react-dom.development.js:11494 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: Select

[jakeboone02]

This is fixed by #3487.

[NordlingDev]

@jakeboone02 - I'm on version 3.0.4 and it still warns about this. I can even see it being used in the source code?

[Oscarteg]

@NordlingDev That is because @jakeboone02 references a pullrequest but the pullrequest is not merged yet.

[rachelleahr]

Any idea when this will be merged? trying to remove these warnings...

[Oscarteg]

@rachelleahr Pull request #3716 fixes it and is merged, but I don't know when it will be released.

[absenteerealitycheck]

Any news on when this will be released?

[rachelleahr]

@gwyneplaine When is the next release planned?

[dbsimeonov]

Does anybody know what is the solution for it? Still having this warning

[qipoy]

it fixed? but I have installed react 16.9.0 and react-select 3.0.4 using NPM. and I still got the warning

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

[Kiyozz]

Not fixed atm

[yanlee26]

1

[ranneyd]

+1

[ranneyd]

Everyone retweet this lmao

https://twitter.com/dustinpkane/status/1174838579056394241

[ranneyd]

So I'm going to drop this here.

https://www.npmjs.com/package/react-select-temp

I'm not happy about it either. I'm just using this to make the warning go away until the maintainers in this lib sort this out. I'm going to continue to monitor the threads and switch back to the real package once this one is ready.

I just took this PR, published to NPM, then updated this lib to use that one.
https://github.com/JedWatson/react-input-autosize/pull/167

Everything we need to make this warning go away exists. We just need the maintainers of this lib to press some buttons.

[razh]

We use https://github.com/ds300/patch-package to patch unsupported lifecycle methods.

[gwyneplaine]

Sorry for the delay everyone, we've now published 3.0.6 with @ranneyd's fix to react-input-autosize, thanks again :)

Looking forward to refactoring rs to truly deprecate usage of these lifecycles soon, thank you al lfor your patience 🙏 it really is appreciated

[aleksfront]

Thanks for updates. I've just switched to 3.0.6 but still see same warning

[gwyneplaine]

@aleksfront thanks for this, I've released 3.0.7 with a fresh yarn.lock which should result in resolved warnings, please let me know if the problem persists 👍

[aleksfront]

Confirming that 3.0.7 working smoothly without warnings.

[kavindadilshan]

: 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: SafeView

please give the answer

[ranneyd]

@kavindadilshan SafeView is not only no where in this project, but it's no where in its node modules. It's probably another component/library in your app.

@gwyneplaine everything works like a charm now. Thank you so much!

[mitchellhamilton]

Thanks for the issue, closing since this is now fixed!

[mreishus]

Looks like there are still some React Strict Mode warnings being generated as of the latest version today (3.0.8). There's an issue for them here: #3745

[An1mus]

+1

[vedees]

With the release of React 16.3, some new lifecycle methods have been introduced, and release of React 17 will deprecate some lifecycle method.

getDerivedStateFromProps is one of those newly introduced lifecycle method replacing componentWillReceiveProps, which has now become UNSAFE_componentWillReceiveProps.

Solution: rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps or use getDerivedStateFromProps but this option will need refactoring your code. prefect solutuon: do not use classes

[ljharb]

Note that renaming to "UNSAFE_" is a breaking change since it drops support for < 16.3.

[JanaSundar]

Getting this warning in version 3.1.0

index.js:1 Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles 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

Please update the following components: AutosizeInput, Select

[luanfelipecosta]

Why the issue is closed then? Im still getting error in 3.1.0.

[AbelFuentes]

3.1.0 and still with issues...

[razh]

• These warnings are appearing because you are running in <React.StrictMode>.
• create-react-app v3.4.1 enabled <React.StrictMode> by default. It was released about one month ago.
• This issue was closed because it was resolved for the case where strict mode is not enabled.
• There is currently a rewrite in progress to remove these deprecated lifecycle methods.

[bladey]

Hi all,

Thank you to everyone who has provided information above.

As you may be aware, this bug has been reported multiple times as per issue #4094. On behalf of the maintainers I apologise it's taken awhile to get to this.

A new master issue #4094 has since been created to help keep track of this bug going forward.

This new issue will exist as the source of truth going forward to investigate the issue, report findings, and implement a bug fix.

We'll take into account all the details above while investigating.

If you feel this issue has been wrongly closed as it isn't related to the new master issue #4094, please let us know and we'll take another look.

Again, thank you.

[mihailsitnic]

Try to replace ur index.js file

From:
ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );

To:
ReactDOM.render(<App />, document.getElementById('root'));

Or:
ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') )