Improved dynamic order state stories render logic to avoid unnecessary renders

Author: Alejandro Gastelum Flores

packages/react-paypal-js/src/stories/payPalCardFields/payPalCardFieldsIndividual.stories.tsx

@@ -330,16 +330,28 @@ export const WithDynamicOrderState: FC = () => {
         column: number,
         count: number,
     ) => {
-        const index = row * 4 + column;
-        const newFieldsTableCounts = [...fieldsTableCounts];
-        newFieldsTableCounts[index] = count;
-        setFieldsTableCounts(newFieldsTableCounts);
+        setFieldsTableCounts((prevFieldsTableCounts) => {
+            const index = row * 4 + column;
+            if (prevFieldsTableCounts[index] === count) {
+                return prevFieldsTableCounts;
+            }
+
+            const newFieldsTableCounts = [...prevFieldsTableCounts];
+            newFieldsTableCounts[index] = count;
+            return newFieldsTableCounts;
+        });
     };
 
     const updateProviderTableCount = (index: number, count: number) => {
-        const newProviderTableCounts = [...providerTableCounts];
-        newProviderTableCounts[index] = count;
-        setProviderTableCounts(newProviderTableCounts);
+        setProviderTableCounts((prevProviderTableCounts) => {
+            if (prevProviderTableCounts[index] === count) {
+                return prevProviderTableCounts;
+            }
+
+            const newProviderTableCounts = [...prevProviderTableCounts];
+            newProviderTableCounts[index] = count;
+            return newProviderTableCounts;
+        });
     };
 
     async function createOrder() {

packages/react-paypal-js/src/stories/payPalCardFields/payPalCardFieldsProvider.stories.tsx

@@ -340,9 +340,15 @@ export const WithDynamicOrderState: FC = () => {
     const [isPaying, setIsPaying] = useState(false);
 
     const updateProviderTableCount = (index: number, count: number) => {
-        const newProviderTableCounts = [...providerTableCounts];
-        newProviderTableCounts[index] = count;
-        setProviderTableCounts(newProviderTableCounts);
+        setProviderTableCounts((prevProviderTableCounts) => {
+            if (prevProviderTableCounts[index] === count) {
+                return prevProviderTableCounts;
+            }
+
+            const newProviderTableCounts = [...prevProviderTableCounts];
+            newProviderTableCounts[index] = count;
+            return newProviderTableCounts;
+        });
     };
 
     async function createOrder() {