Google-maps-react: Warning: componentWillReceiveProps has been renamed, and is not recommended for use.

[Restoration]

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

Hi guys. It above error is shown when I using ReactHooks and googleApiWrapper.
How do I fix this error?? Can I set API key and loading component without using googleApiWrapper?? Do you have another way??

[loq24]

Experiencing the same issue as well

[Earle-Poole]

I had to go into the source code in the node_modules folder like this:

node_modules / google-maps-react / dist / GoogleApiComponent.js

Lines 147 and 148 were changed from:
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(props) {
to
key: 'UNSAFE_componentWillReceiveProps',
value: function UNSAFE_componentWillReceiveProps(props) {

This got rid of that warning for me. This isn't a permanent solution because the developers of React are saying it will be removed eventually.

A permanent solution would be the developers of this repo taking the advice of the warning and shifting to a safer lifecycle method.

[rinaexplore]

I had to go into the source code in the node_modules folder like this:

node_modules / google-maps-react / dist / GoogleApiComponent.js

Lines 147 and 148 were changed from:
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(props) {
to
key: 'UNSAFE_componentWillReceiveProps',
value: function UNSAFE_componentWillReceiveProps(props) {

This got rid of that warning for me. This isn't a permanent solution because the developers of React are saying it will be removed eventually.

A permanent solution would be the developers of this repo taking the advice of the warning and shifting to a safer lifecycle method.

Instead of adding "UNSAFE_" to both values replace them for componentDidUpdate

[erinwilder]

It's not a great practice to edit code inside the node_modules folder. It looks like this project hasn't been worked on for awhile, is there any chance that these lifecycle methods will be updated? It would be a pain to switch to something new, but the lifecycle methods that are throwing those warnings will stop being supported soon.

[Earle-Poole]

I ended up forking the repo and making the changes myself. There were
several other reasons why I forked, such as adding right click props to
markers.

On Thu, Mar 19, 2020, 3:31 PM Erin [e-mail] wrote:

It's not a great practice to edit code inside the node_modules folder. It
looks like this project hasn't been worked on for awhile, is there any
chance that these lifecycle methods will be updated? It would be a pain to
switch to something new, but the lifecycle methods that are throwing those
warnings will stop being supported soon.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/fullstackreact/google-maps-react/issues/376#issuecomment-601402231,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AKSZ5OWD4Z3KHOBDUKORMSDRIJ6LFANCNFSM4IYT6WAQ
.

[RomainLt]

Same issue, there is no solution ?

[SubhasisDebsharma]

I am also facing the same issue