React-stripe-elements: Legacy Context API

Created on 6 Jul 2019 · 12Comments · Source: stripe/react-stripe-elements

When running React in strict mode, this error is appearing when using the Payment Request button:

react-dom.165d5c53.js:500 Warning: Legacy context API has been detected within a strict-mode tree: 
    in StrictMode (created by t)
    in t
    in Unknown (created by WithSelect(t))
    in WithSelect(t)

Please update the following components: PaymentRequestButtonElement

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

This seems to be related to the "legacy context api" being described, where React is saying it will be removed in an upcoming version:
https://reactjs.org/docs/legacy-context.html

Source

mintplugins

👍7

Most helpful comment

How about seeing if https://www.npmjs.com/package/create-react-context works?

Do keep in mind that 16.x was released 2 years ago (and the 16.0 -> 16.3 changes aren't that much). If people are still using 15.x there is noting wrong with only backporting compatibility/security patches to react-stripe-elements 4.x, and releasing a 5.x major that only supports 16.3+ (or 16.8+).

Also not updating context is going to impede your ability to implement some features like the hooks that #317 wants. Fixing bugs like the behaviour with pure/memo components. And when 17.x is finally released the library will not work in it at all.

If create-react-context doesn't work and you absolutely must keep 15.x working with minimal changes in the same version of react-stripe-elements as you support 16.x, do keep in mind that this only affects the context-using parts of the library. So it should be completely possible to move the context code out into a wrapper so you can have separate provider implementations and separate hoc wrapper implementations for legacy context and context.

dantman on 24 Jul 2019

👍5

All 12 comments

Yes! Please!

react-stripe-elements may not work properly when used with components that implement shouldComponentUpdate.

Statements like this in the readme are also a prime example of when the legacy context API has been used incorrectly. And where updating to the official context API will result in bugs being fixed.

Edit: It will also fix this: https://github.com/stripe/react-stripe-elements/blob/master/src/components/Provider.js#L17-L18

dantman on 19 Jul 2019

Hi all! We definitely want to find the best way for Stripe Elements to work well with future versions of React. At the same time, we have users of this library still using React 15 who need to be able to upgrade to get new Stripe-related features without having to rewrite their whole apps in React 16.

We're looking into strategies to serve both cases and don't yet have a definite plan.

asolove-stripe on 24 Jul 2019

👍1

How about seeing if https://www.npmjs.com/package/create-react-context works?

dantman on 24 Jul 2019

👍5

react-stripe-elements is now at v4. Perhaps react 15 support should be left in v3. I'm sure this would introduce weird kind of version release branching if it needs to be maintained, but sticking to an old (and never officially supported) context api is not so cool for Stripe - don't think forking react-stripe-elements should be encouraged in this way

AndreiRailean on 1 Aug 2019

Apparently the usage of legacy context is not just a React 17.x and hooks issue. It's also a performance issue.

https://twitter.com/dan_abramov/status/1157102415709184000

Use of the legacy context apparently disables some optimizations and slows down all other components.

dantman on 2 Aug 2019

😕4 👍2

Any progress on that? Concurrent mode is on the way and this is the only library in my project that still uses legacy context.

paolostyle on 29 Oct 2019

Hello all, we're actively looking at this, but don't yet have a specific ETA. We know the time pressure React 17 introduces here and will update when our plans have solidified.

oliver-stripe on 29 Oct 2019

👍1

17.0 is not the time pressure. Legacy context is not available in concurrent mode. And concurrent mode (currently experimental) will eventually make it into a 16.x release!

dantman on 29 Oct 2019

Still no progress on this? It's the last thing holding our app back from being usable in strict mode.

mikecousins on 15 Feb 2020

mintplugins on 20 Feb 2020

Oh wow, yeah, looks like this library is deprecated now. Thanks.

mikecousins on 20 Feb 2020

Hey everyone, thanks for your interest so far in removing the legacy context usage in react-stripe-elements. We released v1.0.0 of React Stripe.js yesterday, and plan to actively develop that library going forward (react-stripe-elements will still see bugfixes).

React Stripe.js uses the contemporary context API. If you are interested in migrating to React Stripe.js, we have a migration guide available here. Thanks!