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

Author: danzhaaspaypal

.changeset/cold-mangos-sleep.md

@@ -0,0 +1,5 @@
+---
+"@paypal/react-paypal-js": minor
+---
+
+Fixes Button rerendering unnecessarily when Buttons Message params change

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>;
 }

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: "",

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