Merge pull request #29 from mercadopago/feat/prevent-reRender-bricks

Prevent reRender on Bricks

.storybook/bricksExamples.stories.tsx

@@ -6,7 +6,11 @@ const ExampleComponent = ({ file }) => {
 
   useEffect(() => {
     import(`../examples/${file}`).then(({ default: App }) => {
-      setComponent(<App />);
+      setComponent(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      );
     });
   }, []);
   return component;

examples/bricks/CardPayment/1-Customization.tsx

@@ -19,14 +19,26 @@ const App = () => {
     },
   };
 
+  function createPayment() {
+    window.cardPaymentBrickController
+      .getFormData()
+      .then((cardFormData) => {
+        console.log('cardFormData received, creating payment...', cardFormData);
+      })
+      .catch((error) => {});
+  }
+
   return (
-    <Card
-      initialization={{ amount: 100 }}
-      customization={customization}
-      onSubmit={async (param) => {
-        console.log(param);
-      }}
-    />
+    <>
+      <Card
+        initialization={{ amount: 100 }}
+        customization={customization}
+        onSubmit={async (param) => {
+          console.log(param);
+        }}
+      />
+      <button onClick={() => createPayment()}>Custom Button</button>
+    </>
   );
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mercadopago/sdk-react",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Mercado Pago SDK React",
   "main": "index.js",
   "keywords": [

src/@types/global.d.ts

@@ -8,12 +8,13 @@ declare global {
     };
     cardPaymentBrickController: {
       unmount: () => void;
+      getFormData: () => Promise<void>;
     };
     walletBrickController: {
       unmount: () => void;
     };
     statusScreenBrickController: {
       unmount: () => void;
-    }
+    };
   }
 }

src/bricks/cardPayment/index.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { DEBOUNCE_TIME_RENDER } from '../util/constants';
 import {
   onErrorDefault,
   onReadyDefault,
@@ -41,6 +42,8 @@ const CardPayment = ({
   customization,
 }: TCardPayment) => {
   useEffect(() => {
+    // CardPayment uses a debounce to prevent unnecessary reRenders.
+    let timer: ReturnType<typeof setTimeout>;
     const CardPaymentBrickConfig = {
       settings: {
         initialization,
@@ -56,8 +59,12 @@ const CardPayment = ({
       divId: 'cardPaymentBrick_container',
       controller: 'cardPaymentBrickController',
     };
-    initBrick(CardPaymentBrickConfig);
+    timer = setTimeout(() => {
+      initBrick(CardPaymentBrickConfig);
+    }, DEBOUNCE_TIME_RENDER);
+
     return () => {
+      clearTimeout(timer);
       window.cardPaymentBrickController?.unmount();
     };
   }, [initialization, customization, onBinChange, onReady, onError, onSubmit]);

src/bricks/payment/index.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { DEBOUNCE_TIME_RENDER } from '../util/constants';
 import {
   onBinChangeDefault,
   onErrorDefault,
@@ -40,6 +41,8 @@ const BrickPayment = ({
   customization,
 }: TPaymentType) => {
   useEffect(() => {
+    // CardPayment uses a debounce to prevent unnecessary reRenders.
+    let timer: ReturnType<typeof setTimeout>;
     const PaymentBrickController = {
       settings: {
         initialization,
@@ -55,8 +58,12 @@ const BrickPayment = ({
       divId: 'paymentBrick_container',
       controller: 'paymentBrickController',
     };
-    initBrick(PaymentBrickController);
+    timer = setTimeout(() => {
+      initBrick(PaymentBrickController);
+    }, DEBOUNCE_TIME_RENDER);
+
     return () => {
+      clearTimeout(timer);
       window.paymentBrickController?.unmount();
     };
   }, [initialization, customization, onReady, onError, onSubmit, onBinChange]);

src/bricks/statusScreen/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { onErrorDefault, onReadyDefault } from '../util/initial';
 import { IStatusScreenBrickSettings } from './types';
 import { initBrick } from '../util/renderBrick';
+import { DEBOUNCE_TIME_RENDER } from '../util/constants';
 
 // /**
 //  * Status Screen Brick allows you to show buyer the status of a purchase made with any payment method provided by Checkout Bricks.
@@ -35,6 +36,8 @@ const StatusScreen = ({
   initialization,
 }: IStatusScreenBrickSettings) => {
   useEffect(() => {
+    // CardPayment uses a debounce to prevent unnecessary reRenders.
+    let timer: ReturnType<typeof setTimeout>;
     const StatusScreenBrickConfig = {
       settings: {
         initialization,
@@ -48,8 +51,12 @@ const StatusScreen = ({
       divId: 'statusScreenBrick_container',
       controller: 'statusScreenBrickController',
     };
-    initBrick(StatusScreenBrickConfig);
+    timer = setTimeout(() => {
+      initBrick(StatusScreenBrickConfig);
+    }, DEBOUNCE_TIME_RENDER);
+
     return () => {
+      clearTimeout(timer);
       window.statusScreenBrickController?.unmount();
     };
   }, [initialization, customization, onReady, onError]);

src/bricks/util/constants/index.ts

@@ -0,0 +1,2 @@
+// CardPayment uses a debounce to prevent unnecessary reRenders.
+export const DEBOUNCE_TIME_RENDER = 200; //ms

src/bricks/wallet/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { onErrorDefault, onReadyDefault, onSubmitDefault } from '../util/initial';
 import { TWallet } from './types';
 import { initBrick } from '../util/renderBrick';
+import { DEBOUNCE_TIME_RENDER } from '../util/constants';
 
 /**
  * Wallet Brick allows you to offer payments from your Mercado Pago account at any stage of the purchase process.
@@ -31,6 +32,8 @@ const Wallet = ({
   initialization,
 }: TWallet) => {
   useEffect(() => {
+    // CardPayment uses a debounce to prevent unnecessary reRenders.
+    let timer: ReturnType<typeof setTimeout>;
     const WalletBrickConfig = {
       settings: {
         initialization,
@@ -46,8 +49,12 @@ const Wallet = ({
       controller: 'walletBrickController',
     };
 
-    initBrick(WalletBrickConfig);
+    timer = setTimeout(() => {
+      initBrick(WalletBrickConfig);
+    }, DEBOUNCE_TIME_RENDER);
+
     return () => {
+      clearTimeout(timer);
       window.walletBrickController?.unmount();
     };
   }, [customization, initialization, onReady, onError, onSubmit]);