useLayoutEffect for synchronous cleanup (#156)

Fixes stripe/react-stripe-js#154 on react17
CoCo-27 · Feb 1, 2021 · ec96354 · ec96354
1 parent 292bc63
commit ec96354
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/src/components/createElementComponent.test.tsx b/src/components/createElementComponent.test.tsx
@@ -121,6 +121,33 @@ describe('createElementComponent', () => {
       false
     );
 
+
+    it('Can remove and add CardElement at the same time', () => {
+      let cardMounted = false;
+      mockElement.mount.mockImplementation(()=> {
+        if(cardMounted){
+          throw new Error('Card already mounted');
+        }
+        cardMounted = true;
+      });
+      mockElement.destroy.mockImplementation(()=> {
+        cardMounted = false;
+      });
+
+      const {rerender} = render(
+        <Elements stripe={mockStripe}>
+          <CardElement key={"1"} />
+        </Elements>
+      );
+      rerender(
+        <Elements stripe={mockStripe}>
+          <CardElement key={"2"} />
+        </Elements>
+      );
+
+      expect(mockElement.mount).toHaveBeenCalledTimes(2);
+    });
+
     it('gives the element component a proper displayName', () => {
       expect(CardElement.displayName).toBe('CardElement');
     });

diff --git a/src/components/createElementComponent.tsx b/src/components/createElementComponent.tsx
@@ -114,7 +114,7 @@ const createElementComponent = (
       }
     }, [options]);
 
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
       return () => {
         if (elementRef.current) {
           elementRef.current.destroy();