React-stripe-elements: Unsafe lifecycle methods were found within a strict-mode tree: in StrictMode (componentWillReceiveProps)

[drwpow]

Feature request or idea? Consider opening an
API review!

Summary

React’s strict mode (flags deprecating APIs) throws warnings in development of using the componentWillReceiveProps method, and recommends replacing with getDerivedStateFromProps instead.

Other information

Full console message:

Warning: Unsafe lifecycle methods were found within a strict-mode tree:
    in StrictMode

componentWillReceiveProps: Please update the following components to use static getDerivedStateFromProps instead: CardCvcElement, CardExpiryElement, CardNumberElement, PostalCodeElement, Provider

Learn more about this warning here:
https://fb.me/react-strict-mode-warnings

[cweiss-stripe]

@dangodev Thanks for reporting this. For now we will keep using componentWillReceiveProps to ensure compatibility with older React versions, but once the latest version drops support for componentWillReceiveProps we will replace it and cut a new release.

[asolove-stripe]

I am going to close this issue as it represents work we will eventually do but only as we learn more about React's deprecation timeline.

[fabien-h]

We have this warning now

backend.js:6 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: Provider

I guess it's time.

You can use the npx react-codemod rename-unsafe-lifecycles if you don't have time.

Then in https://github.com/stripe/react-stripe-elements/blob/master/src/components/Provider.js, line 153, you could replace by componentDidUpdate. I tried locally and it seems to work without any issue.

[mulholio]

For anyone searching for things in the same place as me, this is fixed as of https://github.com/stripe/react-stripe-elements/blob/master/CHANGELOG.md#breaking-changes-1