fix: message props update without button teardown (#536)

* fixes button teardown when message props update * chore: add changeset * fixes updateProps is not a function test script issue
paypal · Jul 25, 2024 · dcd618c · dcd618c
1 parent 543fa08
commit dcd618c
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git a/.changeset/cold-mangos-sleep.md b/.changeset/cold-mangos-sleep.md
@@ -0,0 +1,5 @@
+---
+"@paypal/react-paypal-js": minor
+---
+
+Fixes Button rerendering unnecessarily when Buttons Message params change
diff --git a/packages/paypal-js/types/components/buttons.d.ts b/packages/paypal-js/types/components/buttons.d.ts
@@ -323,4 +323,5 @@ export interface PayPalButtonsComponent {
     close: () => Promise<void>;
     isEligible: () => boolean;
     render: (container: HTMLElement | string) => Promise<void>;
+    updateProps: (props: PayPalButtonsComponentOptions) => Promise<void>;
 }
diff --git a/packages/react-paypal-js/src/components/PayPalButtons.test.tsx b/packages/react-paypal-js/src/components/PayPalButtons.test.tsx
@@ -349,6 +349,7 @@ describe("<PayPalButtons />", () => {
                         }
                         return Promise.reject("Unknown error");
                     }),
+                    updateProps: jest.fn().mockResolvedValue({}),
                 };
             },
             version: "",
@@ -423,6 +424,7 @@ describe("<PayPalButtons />", () => {
                     close: jest.fn().mockResolvedValue({}),
                     isEligible: jest.fn().mockReturnValue(true),
                     render: mockRender,
+                    updateProps: jest.fn().mockResolvedValue({}),
                 };
             },
             version: "",

diff --git a/packages/react-paypal-js/src/components/PayPalButtons.tsx b/packages/react-paypal-js/src/components/PayPalButtons.tsx
@@ -39,7 +39,11 @@ export const PayPalButtons: FunctionComponent<PayPalButtonsComponentProps> = ({
         }
     }
 
-    const buttonMessageContent = JSON.stringify(buttonProps.message);
+    if (buttons.current?.updateProps) {
+        buttons.current.updateProps({
+            message: buttonProps.message
+        })
+    }
 
     // useEffect hook for rendering the buttons
     useEffect(() => {
@@ -125,8 +129,7 @@ export const PayPalButtons: FunctionComponent<PayPalButtonsComponentProps> = ({
     }, [
         isResolved,
         ...forceReRender,
-        buttonProps.fundingSource,
-        buttonMessageContent
+        buttonProps.fundingSource
     ]);
 
     // useEffect hook for managing disabled state