Prevent recreation of elements instance (#297)

Author: bmathews-stripe

src/components/Elements.test.tsx

@@ -334,5 +334,102 @@ describe('Elements', () => {
       expect(mockElements.update).toHaveBeenCalledWith({bar: 'bar'});
       expect(mockStripe.elements).toHaveBeenCalledTimes(2);
     });
+
+    test('creates only one elements instance when updated while resolving Stripe promise', async () => {
+      let updateResolver: any = () => {};
+      const updateResult = new Promise<void>((resolve) => {
+        updateResolver = resolve;
+      });
+
+      let stripePromiseResolve: any = () => {};
+      const stripePromise = new Promise<any>((resolve) => {
+        stripePromiseResolve = resolve;
+      });
+
+      // Only resolve stripe once the options have been updated
+      updateResult.then(() => {
+        stripePromiseResolve(mockStripePromise);
+      });
+
+      const TestComponent = () => {
+        const [_, forceRerender] = React.useState(0);
+
+        React.useEffect(() => {
+          setTimeout(() => {
+            forceRerender((val) => val + 1);
+            setTimeout(() => {
+              updateResolver();
+            });
+          });
+        }, []);
+
+        return (
+          <Elements
+            stripe={stripePromise}
+            options={{appearance: {theme: 'flat'}}}
+          />
+        );
+      };
+
+      render(<TestComponent />);
+
+      await act(async () => await updateResult);
+
+      await act(async () => await stripePromise);
+
+      expect(mockStripe.elements).toHaveBeenCalledWith({
+        appearance: {theme: 'flat'},
+      });
+      expect(mockStripe.elements).toHaveBeenCalledTimes(1);
+    });
+
+    test('creates only one elements instance when updated while resolving Stripe promise in StrictMode', async () => {
+      let updateResolver: any = () => {};
+      const updateResult = new Promise<void>((resolve) => {
+        updateResolver = resolve;
+      });
+
+      let stripePromiseResolve: any = () => {};
+      const stripePromise = new Promise<any>((resolve) => {
+        stripePromiseResolve = resolve;
+      });
+
+      // Only resolve stripe once the options have been updated
+      updateResult.then(() => {
+        stripePromiseResolve(mockStripePromise);
+      });
+
+      const TestComponent = () => {
+        const [_, forceRerender] = React.useState(0);
+
+        React.useEffect(() => {
+          setTimeout(() => {
+            forceRerender((val) => val + 1);
+            setTimeout(() => {
+              updateResolver();
+            });
+          });
+        }, []);
+
+        return (
+          <StrictMode>
+            <Elements
+              stripe={stripePromise}
+              options={{appearance: {theme: 'flat'}}}
+            />
+          </StrictMode>
+        );
+      };
+
+      render(<TestComponent />);
+
+      await act(async () => await updateResult);
+      await act(async () => await stripePromise);
+
+      expect(mockStripe.elements).toHaveBeenCalledWith({
+        appearance: {theme: 'flat'},
+      });
+      expect(mockStripe.elements).toHaveBeenCalledTimes(1);
+    });
   });
 });

src/components/Elements.tsx

@@ -125,25 +125,30 @@ export const Elements: FunctionComponent<PropsWithChildren<ElementsProps>> = (({
   React.useEffect(() => {
     let isMounted = true;
 
+    const safeSetContext = (stripe: stripeJs.Stripe) => {
+      setContext((ctx) => {
+        // no-op if we already have a stripe instance (https://github.com/stripe/react-stripe-js/issues/296)
+        if (ctx.stripe) return ctx;
+        return {
+          stripe,
+          elements: stripe.elements(options),
+        };
+      });
+    };
+
     // For an async stripePromise, store it in context once resolved
     if (parsed.tag === 'async' && !ctx.stripe) {
       parsed.stripePromise.then((stripe) => {
         if (stripe && isMounted) {
           // Only update Elements context if the component is still mounted
           // and stripe is not null. We allow stripe to be null to make
           // handling SSR easier.
-          setContext({
-            stripe,
-            elements: stripe.elements(options),
-          });
+          safeSetContext(stripe);
         }
       });
     } else if (parsed.tag === 'sync' && !ctx.stripe) {
       // Or, handle a sync stripe instance going from null -> populated
-      setContext({
-        stripe: parsed.stripe,
-        elements: parsed.stripe.elements(options),
-      });
+      safeSetContext(parsed.stripe);
     }
 
     return () => {