Optimizes useCheckoutPricing useEffect hook

recurly · Feb 4, 2020 · d7c886e · d7c886e
1 parent c652261
commit d7c886e
Showing 1 changed file with 51 additions and 50 deletions.
diff --git a/lib/use-checkout-pricing.js b/lib/use-checkout-pricing.js
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import useRecurly from './use-recurly';
 import cloneDeep from 'lodash/cloneDeep';
 
@@ -46,11 +46,12 @@ export default function useCheckoutPricing(initialInputs = {}, handleError = thr
   const recurly = useRecurly();
   const [loading, setLoading] = useState(true);
   const [input, setInput] = useState(initialInputs);
+  const stringifiedInput = useMemo(() => JSON.stringify(input), [input]);
   const [pricing, setPricing] = useState(recurly.Pricing.Checkout());
 
   useEffect(() => {
     setLoading(true);
-    const { subscriptions = [], adjustments = [], ...restInputs } = input;
+    const { subscriptions = [], adjustments = [], ...restInputs } = JSON.parse(stringifiedInput);
     let checkoutPricing = recurly.Pricing.Checkout();
 
     if (Object.keys(restInputs).length) {
@@ -72,63 +73,63 @@ export default function useCheckoutPricing(initialInputs = {}, handleError = thr
         handleError(error);
         setLoading(false);
       });
-  }, [input]);
-
-  function addAdjustments (adjustments, checkoutPricing) {
-    return adjustments
-      .reduce((checkoutPricing, adjustment) => {
-        if (adjustment.itemCode) {
-          return checkoutPricing.adjustment(adjustment);
-        }
-        return checkoutPricing;
-      }, checkoutPricing).catch(handleError)
-  };
 
-  function addRestInputs(restInputs, checkoutPricing) {
-    const { PRICING_METHODS } = checkoutPricing;
-    const exclude = ['reset', 'remove', 'reprice', 'subscriptions', 'adjustments', 'addon', 'plan'];
-    const permittedInputs = PRICING_METHODS.filter(method => !exclude.includes(method));
+    function addAdjustments (adjustments, checkoutPricing) {
+      return adjustments
+        .reduce((checkoutPricing, adjustment) => {
+          if (adjustment.itemCode) {
+            return checkoutPricing.adjustment(adjustment);
+          }
+          return checkoutPricing;
+        }, checkoutPricing).catch(handleError);
+    };
 
-    return Object.entries(restInputs).reduce((acc, input) => {
-      const [method, value] = input;
-      const shouldCallPricingMethod = value && permittedInputs.includes(method);
-      return shouldCallPricingMethod ? acc[method](value).catch(handleError) : acc;
-    }, checkoutPricing);
-  };
+    function addRestInputs(restInputs, checkoutPricing) {
+      const { PRICING_METHODS } = checkoutPricing;
+      const exclude = ['reset', 'remove', 'reprice', 'subscriptions', 'adjustments', 'addon', 'plan'];
+      const permittedInputs = PRICING_METHODS.filter(method => !exclude.includes(method));
 
-  function addSubscriptions(subscriptions, checkoutPricing) {
-    const { subscriptionPricings } = subscriptions.reduce(
-      ({ checkoutPricing, subscriptionPricings }, { plan, tax, addons = [], quantity }) => {
-        let subscriptionPricing = recurly.Pricing.Subscription().plan(plan, { quantity });
+      return Object.entries(restInputs).reduce((acc, input) => {
+        const [method, value] = input;
+        const shouldCallPricingMethod = value && permittedInputs.includes(method);
+        return shouldCallPricingMethod ? acc[method](value).catch(handleError) : acc;
+      }, checkoutPricing);
+    };
 
-        if (addons.length) {
-          subscriptionPricing = addAddons(addons, subscriptionPricing);
-        }
+    function addSubscriptions(subscriptions, checkoutPricing) {
+      const { subscriptionPricings } = subscriptions.reduce(
+        ({ checkoutPricing, subscriptionPricings }, { plan, tax, addons = [], quantity }) => {
+          let subscriptionPricing = recurly.Pricing.Subscription().plan(plan, { quantity });
 
-        if (tax) {
-          subscriptionPricing = subscriptionPricing.tax(tax);
-        }
+          if (addons.length) {
+            subscriptionPricing = addAddons(addons, subscriptionPricing);
+          }
 
-        subscriptionPricing = subscriptionPricing.catch(handleError);
+          if (tax) {
+            subscriptionPricing = subscriptionPricing.tax(tax);
+          }
 
-        return {
-          checkoutPricing: checkoutPricing.subscription(subscriptionPricing.done()),
-          subscriptionPricings: [...subscriptionPricings, subscriptionPricing],
-        };
-      },
-      { checkoutPricing, subscriptionPricings: [] },
-    );
+          subscriptionPricing = subscriptionPricing.catch(handleError);
 
-    return Promise.all(subscriptionPricings);
-  };
+          return {
+            checkoutPricing: checkoutPricing.subscription(subscriptionPricing.done()),
+            subscriptionPricings: [...subscriptionPricings, subscriptionPricing],
+          };
+        },
+        { checkoutPricing, subscriptionPricings: [] },
+      );
 
-  function addAddons(addons = [], subscriptionPricing) {
-    return addons
-      .reduce((subscriptionPricing, { code, quantity }) => {
-        return subscriptionPricing.addon(code, { quantity });
-      }, subscriptionPricing)
-      .catch(handleError);
-  };
+      return Promise.all(subscriptionPricings);
+    };
+
+    function addAddons(addons = [], subscriptionPricing) {
+      return addons
+        .reduce((subscriptionPricing, { code, quantity }) => {
+          return subscriptionPricing.addon(code, { quantity });
+        }, subscriptionPricing)
+        .catch(handleError);
+    };
+  }, [stringifiedInput, handleError, recurly.Pricing]);
 
   const output = {
     price: (pricing && cloneDeep(pricing.price)) || {},