diff --git a/.changeset/cold-mangos-sleep.md b/.changeset/cold-mangos-sleep.md new file mode 100644 index 00000000..c900ddf9 --- /dev/null +++ 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 index 3fea13f9..ef8d1834 100644 --- 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; isEligible: () => boolean; render: (container: HTMLElement | string) => Promise; + updateProps: (props: PayPalButtonsComponentOptions) => Promise; } diff --git a/packages/react-paypal-js/src/components/PayPalButtons.test.tsx b/packages/react-paypal-js/src/components/PayPalButtons.test.tsx index 18930833..51f52a64 100644 --- 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("", () => { } return Promise.reject("Unknown error"); }), + updateProps: jest.fn().mockResolvedValue({}), }; }, version: "", @@ -423,6 +424,7 @@ describe("", () => { 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 index 7e60187c..7f101be1 100644 --- 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 = ({ } } - 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 = ({ }, [ isResolved, ...forceReRender, - buttonProps.fundingSource, - buttonMessageContent + buttonProps.fundingSource ]); // useEffect hook for managing disabled state