refactor(common): CHECKOUT-4272 Use bigcommerce/memoize package

package.json

@@ -24,6 +24,7 @@
     "@bigcommerce/checkout-sdk": "^1.34.3",
     "@bigcommerce/citadel": "^2.15.1",
     "@bigcommerce/form-poster": "^1.2.2",
+    "@bigcommerce/memoize": "^1.0.0",
     "@bigcommerce/request-sender": "^0.3.0",
     "@bigcommerce/script-loader": "^0.1.5",
     "@sentry/browser": "^5.6.2",

src/app/address/AddressForm.tsx

@@ -1,8 +1,8 @@
 import { Address, Country, FormField } from '@bigcommerce/checkout-sdk';
+import { memoize } from '@bigcommerce/memoize';
 import { forIn, noop } from 'lodash';
 import React, { createRef, Component, ReactNode, RefObject } from 'react';
 
-import { memoize } from '../common/utility';
 import { withLanguage, WithLanguageProps } from '../locale';
 import { AutocompleteItem } from '../ui/autocomplete';
 
@@ -37,7 +37,7 @@ class AddressForm extends Component<AddressFormProps & WithLanguageProps> {
 
     private handleDynamicFormFieldChange: (name: string) => (value: string | string[]) => void = memoize(name => value => {
         this.syncNonFormikValue(name, value);
-    }, { maxSize: 0 });
+    });
 
     componentDidMount(): void {
         const { current } = this.containerRef;

src/app/address/getAddressValidationSchema.ts

@@ -1,5 +1,5 @@
 import { FormField, LanguageService } from '@bigcommerce/checkout-sdk';
-import { memoize } from 'lodash';
+import { memoize } from '@bigcommerce/memoize';
 import { array, date, number, object, string, ArraySchema, NumberSchema, ObjectSchema, Schema, StringSchema } from 'yup';
 
 import { AddressFormValues } from './mapAddressToFormValues';
@@ -103,4 +103,4 @@ export default memoize(function getAddressValidationSchema({
             )
         ).nullable(true),
     }) as ObjectSchema<Partial<AddressFormValues>> ;
-}, (...args) => JSON.stringify(args));
+});

src/app/cart/Redeemable.tsx

@@ -1,11 +1,11 @@
 import { CheckoutSelectors, RequestError } from '@bigcommerce/checkout-sdk';
+import { memoizeOne } from '@bigcommerce/memoize';
 import { withFormik, FieldProps, FormikProps } from 'formik';
 import { noop } from 'lodash';
 import React, { memo, useCallback, Fragment, FunctionComponent, KeyboardEvent } from 'react';
 import { object, string } from 'yup';
 
 import { preventDefault } from '../common/dom';
-import { memoize } from '../common/utility';
 import { withLanguage, TranslatedString, WithLanguageProps } from '../locale';
 import { Alert, AlertType } from '../ui/alert';
 import { Button, ButtonVariant } from '../ui/button';
@@ -74,7 +74,7 @@ const RedeemableForm: FunctionComponent<Partial<RedeemableProps> & FormikProps<R
     clearError = noop,
     submitForm,
 }) => {
-    const handleKeyDown = useCallback(memoize((setSubmitted: FormContextType['setSubmitted']) => (
+    const handleKeyDown = useCallback(memoizeOne((setSubmitted: FormContextType['setSubmitted']) => (
         (event: KeyboardEvent) => {
             if (appliedRedeemableError) {
                 clearError(appliedRedeemableError);
@@ -94,7 +94,7 @@ const RedeemableForm: FunctionComponent<Partial<RedeemableProps> & FormikProps<R
         submitForm,
     ]);
 
-    const handleSubmit = useCallback(memoize((setSubmitted: FormContextType['setSubmitted']) => (
+    const handleSubmit = useCallback(memoizeOne((setSubmitted: FormContextType['setSubmitted']) => (
         () => {
             setSubmitted(true);
             submitForm();
@@ -142,7 +142,7 @@ const RedeemableForm: FunctionComponent<Partial<RedeemableProps> & FormikProps<R
         isApplyingRedeemable,
     ]);
 
-    const renderContent = useCallback(memoize(({ setSubmitted }: FormContextType) => (
+    const renderContent = useCallback(memoizeOne(({ setSubmitted }: FormContextType) => (
         <FormField
             name="redeemableCode"
             label={ renderLabel }

src/app/checkout/CheckoutProvider.tsx

@@ -1,8 +1,7 @@
 import { CheckoutSelectors, CheckoutService } from '@bigcommerce/checkout-sdk';
+import { memoizeOne } from '@bigcommerce/memoize';
 import React, { Component, ReactNode } from 'react';
 
-import { memoize } from '../common/utility';
-
 import CheckoutContext from './CheckoutContext';
 
 export interface CheckoutProviderProps {
@@ -18,7 +17,7 @@ export default class CheckoutProvider extends Component<CheckoutProviderProps, C
 
     private unsubscribe?: () => void;
 
-    private getContextValue = memoize((checkoutService, checkoutState) => {
+    private getContextValue = memoizeOne((checkoutService, checkoutState) => {
         return {
             checkoutService,
             checkoutState,

src/app/common/utility/index.ts

@@ -1,3 +1 @@
 export * from './emptyData';
-
-export { default as memoize } from './memoize/memoize';