diff --git a/src/app/address/AddressForm.tsx b/src/app/address/AddressForm.tsx
index c77dd180c1..02d3c77bca 100644
--- a/src/app/address/AddressForm.tsx
+++ b/src/app/address/AddressForm.tsx
@@ -2,6 +2,7 @@ import { Address, Country, FormField } from '@bigcommerce/checkout-sdk';
 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';
 
@@ -34,6 +35,10 @@ class AddressForm extends Component<AddressFormProps & WithLanguageProps> {
     private containerRef: RefObject<HTMLElement> = createRef();
     private nextElement?: HTMLElement | null;
 
+    private handleDynamicFormFieldChange: (name: string) => (value: string | string[]) => void = memoize(name => value => {
+        this.syncNonFormikValue(name, value);
+    }, { maxSize: 0 });
+
     componentDidMount(): void {
         const { current } = this.containerRef;
 
@@ -67,13 +72,9 @@ class AddressForm extends Component<AddressFormProps & WithLanguageProps> {
                                 countryCode={ countryCode }
                                 supportedCountries={ countriesWithAutocomplete }
                                 field={ field }
-                                onSelect={ this.onAutocompleteSelect }
+                                onSelect={ this.handleAutocompleteSelect }
                                 onToggleOpen={ onAutocompleteToggle }
-                                onChange={ (value, isOpen) => {
-                                    if (!isOpen) {
-                                        this.syncNonFormikValue(AUTOCOMPLETE_FIELD_NAME, value);
-                                    }
-                                } }
+                                onChange={ this.handleAutocompleteChange }
                                 apiKey={ googleMapsApiKey }
                                 nextElement={ this.nextElement || undefined }
                             />
@@ -82,7 +83,7 @@ class AddressForm extends Component<AddressFormProps & WithLanguageProps> {
 
                     return (
                         <DynamicFormField
-                            onChange={ value => this.syncNonFormikValue(addressFieldName, value) }
+                            onChange={ this.handleDynamicFormFieldChange(addressFieldName) }
                             // stateOrProvince can sometimes be a dropdown or input, so relying on id is not sufficient
                             key={ `${field.id}-${field.name}` }
                             parentFieldName={ field.custom ?
@@ -129,7 +130,13 @@ class AddressForm extends Component<AddressFormProps & WithLanguageProps> {
         return fieldType as DynamicFormFieldType;
     }
 
-    private onAutocompleteSelect: (
+    private handleAutocompleteChange: (value: string, isOpen: boolean) => void = (value, isOpen) => {
+        if (!isOpen) {
+            this.syncNonFormikValue(AUTOCOMPLETE_FIELD_NAME, value);
+        }
+    };
+
+    private handleAutocompleteSelect: (
         place: google.maps.places.PlaceResult,
         item: AutocompleteItem
     ) => void = (place, { value: autocompleteValue }) => {
diff --git a/src/app/address/AddressSelect.tsx b/src/app/address/AddressSelect.tsx
index ae409b1c02..7103674fdf 100644
--- a/src/app/address/AddressSelect.tsx
+++ b/src/app/address/AddressSelect.tsx
@@ -1,5 +1,5 @@
 import { Address, CustomerAddress } from '@bigcommerce/checkout-sdk';
-import React, { Component, FunctionComponent, ReactNode } from 'react';
+import React, { memo, FunctionComponent, PureComponent, ReactNode } from 'react';
 
 import { preventDefault } from '../common/dom';
 import { TranslatedString } from '../locale';
@@ -15,12 +15,11 @@ export interface AddressSelectProps {
     onUseNewAddress(currentAddress?: Address): void;
 }
 
-class AddressSelect extends Component<AddressSelectProps> {
+class AddressSelect extends PureComponent<AddressSelectProps> {
     render(): ReactNode {
         const {
             addresses,
             selectedAddress,
-            onUseNewAddress,
         } = this.props;
 
         return (
@@ -29,8 +28,8 @@ class AddressSelect extends Component<AddressSelectProps> {
                     <DropdownTrigger dropdown={
                         <AddressSelectMenu
                             addresses={ addresses }
-                            onSelectAddress={ this.onSelectAddress }
-                            onUseNewAddress={ () => onUseNewAddress(selectedAddress) }
+                            onSelectAddress={ this.handleSelectAddress }
+                            onUseNewAddress={ this.handleUseNewAddress }
                             selectedAddress={ selectedAddress }
                         />
                     }>
@@ -44,7 +43,7 @@ class AddressSelect extends Component<AddressSelectProps> {
         );
     }
 
-    private onSelectAddress: (newAddress: Address) => void = (newAddress: Address) => {
+    private handleSelectAddress: (newAddress: Address) => void = (newAddress: Address) => {
         const {
             onSelectAddress,
             selectedAddress,
@@ -54,6 +53,15 @@ class AddressSelect extends Component<AddressSelectProps> {
             onSelectAddress(newAddress);
         }
     };
+
+    private handleUseNewAddress: () => void = () => {
+        const {
+            selectedAddress,
+            onUseNewAddress,
+        } = this.props;
+
+        onUseNewAddress(selectedAddress);
+    };
 }
 
 const AddressSelectMenu: FunctionComponent<AddressSelectProps> = ({
@@ -102,4 +110,4 @@ const AddressSelectButton: FunctionComponent<AddressSelectButtonProps> = ({
     </a>
 );
 
-export default AddressSelect;
+export default memo(AddressSelect);
diff --git a/src/app/address/CheckboxGroupFormField.tsx b/src/app/address/CheckboxGroupFormField.tsx
index b4b8841676..8bbbc6a2d9 100644
--- a/src/app/address/CheckboxGroupFormField.tsx
+++ b/src/app/address/CheckboxGroupFormField.tsx
@@ -1,7 +1,7 @@
 import { FormFieldItem } from '@bigcommerce/checkout-sdk';
-import { getIn, FieldArray } from 'formik';
-import { difference, kebabCase, noop } from 'lodash';
-import React, { FunctionComponent, ReactNode } from 'react';
+import { getIn, FieldArray, FieldArrayRenderProps } from 'formik';
+import { difference, kebabCase, noop, pick } from 'lodash';
+import React, { memo, useCallback, ChangeEvent, FunctionComponent, ReactNode } from 'react';
 
 import { FormFieldContainer, FormFieldError } from '../ui/form';
 
@@ -10,66 +10,134 @@ import DynamicInput from './DynamicInput';
 import MultiCheckboxControl from './MultiCheckboxControl';
 
 export interface CheckboxGroupFormFieldProps {
-    name: string;
     id: string;
     label: ReactNode;
+    name: string;
     options: FormFieldItem[];
     onChange?(values: string[]): void;
 }
 
-const CheckboxGroupFormField: FunctionComponent<CheckboxGroupFormFieldProps> = ({
+type MultiCheckboxFormFieldProps = (
+    CheckboxGroupFormFieldProps &
+    Pick<FieldArrayRenderProps, 'push' | 'remove' | 'pop' | 'form'>
+);
+
+const MultiCheckboxFormField: FunctionComponent<MultiCheckboxFormFieldProps> = ({
+    form: { values, errors },
+    id,
     label,
     name,
+    onChange = noop,
+    options,
+    pop,
+    push,
+    remove,
+}) => {
+    const handleSelectAll = useCallback(() => {
+        const checkedValues: string[] = getIn(values, name) || [];
+
+        difference(options.map(({ value }) => value), checkedValues)
+            .forEach(val => push(val));
+
+        onChange(getIn(values, name));
+    }, [
+        name,
+        onChange,
+        options,
+        push,
+        values,
+    ]);
+
+    const handleSelectNone = useCallback(() => {
+        const checkedValues: string[] = getIn(values, name) || [];
+
+        checkedValues.forEach(() => pop());
+
+        onChange(getIn(values, name));
+    }, [
+        name,
+        onChange,
+        pop,
+        values,
+    ]);
+
+    const handleInputChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+        const checkedValues: string[] = getIn(values, name) || [];
+        const { value, checked } = event.target;
+
+        if (checked) {
+            push(value);
+        } else {
+            remove(checkedValues.indexOf(value));
+        }
+
+        onChange(getIn(values, name));
+    }, [
+        name,
+        onChange,
+        push,
+        remove,
+        values,
+    ]);
+
+    return <FormFieldContainer hasError={ getIn(errors, name) && getIn(errors, name).length }>
+        { label }
+
+        <MultiCheckboxControl
+            testId={ id }
+            onSelectedAll={ handleSelectAll }
+            onSelectedNone={ handleSelectNone }
+        />
+
+        <DynamicInput
+            name={ name }
+            value={ getIn(values, name) || [] }
+            onChange={ handleInputChange }
+            fieldType={ DynamicFormFieldType.checkbox }
+            options={ options }
+            id={ id }
+        />
+
+        <FormFieldError
+            name={ name }
+            testId={ `${kebabCase(name)}-field-error-message` }
+        />
+    </FormFieldContainer>;
+};
+
+const CheckboxGroupFormField: FunctionComponent<CheckboxGroupFormFieldProps> = ({
     id,
+    label,
+    name,
+    onChange,
     options,
-    onChange = noop,
-}) => (
-    <FieldArray
+}) => {
+    const renderField = useCallback((renderProps: FieldArrayRenderProps) => (
+        <MultiCheckboxFormField
+            id={ id }
+            label={ label }
+            name={ name }
+            onChange={ onChange }
+            options={ options }
+            { ...pick(renderProps, [
+                'form',
+                'pop',
+                'push',
+                'remove',
+            ]) }
+        />
+    ), [
+        id,
+        label,
+        name,
+        onChange,
+        options,
+    ]);
+
+    return <FieldArray
         name={ name }
-        render={ ({ push, remove, pop, form: { values, errors } }) => (
-            <FormFieldContainer hasError={ getIn(errors, name) && getIn(errors, name).length }>
-                { label }
-                <MultiCheckboxControl
-                    testId={ id }
-                    onSelectedAll={ () => {
-                        const checkedValues: string[] = getIn(values, name) || [];
-                        difference(options.map(({ value }) => value), checkedValues)
-                            .forEach(val => push(val));
-
-                        onChange(getIn(values, name));
-                    }}
-                    onSelectedNone={ () => {
-                        const checkedValues: string[] = getIn(values, name) || [];
-                        checkedValues.forEach(() => pop());
-                        onChange(getIn(values, name));
-                    }}
-                />
-                <DynamicInput
-                    name={ name }
-                    value={ getIn(values, name) || [] }
-                    onChange={e => {
-                        const checkedValues: string[] = getIn(values, name) || [];
-                        const { value, checked } = e.target;
-
-                        if (checked) {
-                            push(value);
-                        } else {
-                            remove(checkedValues.indexOf(value));
-                        }
-
-                        onChange(getIn(values, name));
-                    } }
-                    fieldType={ DynamicFormFieldType.checkbox }
-                    options={ options }
-                    id={ id }
-                />
-                <FormFieldError
-                    name={ name }
-                    testId={ `${kebabCase(name)}-field-error-message` }
-                />
-            </FormFieldContainer>
-        )}
-    />
-);
+        render={ renderField }
+    />;
+};
 
-export default CheckboxGroupFormField;
+export default memo(CheckboxGroupFormField);
diff --git a/src/app/address/DynamicFormField.tsx b/src/app/address/DynamicFormField.tsx
index ade8236f8d..3d0f93c47b 100644
--- a/src/app/address/DynamicFormField.tsx
+++ b/src/app/address/DynamicFormField.tsx
@@ -1,5 +1,6 @@
 import { FormField as FormFieldType } from '@bigcommerce/checkout-sdk';
-import React, { FunctionComponent } from 'react';
+import { FieldProps } from 'formik';
+import React, { memo, useCallback, useMemo, FunctionComponent } from 'react';
 
 import { TranslatedString } from '../locale';
 import { FormField, Label } from '../ui/form';
@@ -74,7 +75,8 @@ const DynamicFormField: FunctionComponent<DynamicFormFieldProps>  = ({
     const fieldInputId = getFormFieldInputId(addressFieldName);
     const fieldName = parentFieldName ? `${parentFieldName}.${name}` : name;
     const translatedLabelString = LABEL[name];
-    const label = (
+
+    const label = useMemo(() => (
         <Label htmlFor={ fieldInputId }>
             { custom ?
                 fieldLabel :
@@ -88,7 +90,37 @@ const DynamicFormField: FunctionComponent<DynamicFormFieldProps>  = ({
                 </>
             }
         </Label>
-    );
+    ), [
+        custom,
+        fieldInputId,
+        fieldLabel,
+        required,
+        translatedLabelString,
+    ]);
+
+    const renderInput = useCallback(({ field }: FieldProps<string>) => (
+        <DynamicInput
+            { ...field }
+            maxLength={ maxLength || undefined }
+            max={ max }
+            min={ min }
+            placeholder={ placeholder || (options && options.helperLabel) }
+            fieldType={ fieldType }
+            rows={ options && (options as any).rows }
+            options={ options && options.items }
+            autoComplete={ AUTOCOMPLETE[addressFieldName] }
+            id={ fieldInputId }
+        />
+    ), [
+        addressFieldName,
+        fieldInputId,
+        fieldType,
+        max,
+        maxLength,
+        min,
+        options,
+        placeholder,
+    ]);
 
     return (
         <div className={ `dynamic-form-field dynamic-form-field--${getFormFieldLegacyName(addressFieldName)}` }>
@@ -103,25 +135,12 @@ const DynamicFormField: FunctionComponent<DynamicFormFieldProps>  = ({
                 <FormField
                     name={ fieldName }
                     onChange={ onChange }
-                    label={ () => label }
-                    input={ props =>
-                        <DynamicInput
-                            { ...props.field }
-                            maxLength={ maxLength || undefined }
-                            max={ max }
-                            min={ min }
-                            placeholder={ placeholder || (options && options.helperLabel) }
-                            fieldType={ fieldType }
-                            rows={ options && (options as any).rows }
-                            options={ options && options.items }
-                            autoComplete={ AUTOCOMPLETE[addressFieldName] }
-                            id={ fieldInputId }
-                        />
-                    }
+                    label={ label }
+                    input={ renderInput }
                 />
             }
         </div>
     );
 };
 
-export default DynamicFormField;
+export default memo(DynamicFormField);
diff --git a/src/app/address/DynamicInput.tsx b/src/app/address/DynamicInput.tsx
index 64f0bdffe9..580f11a8e9 100644
--- a/src/app/address/DynamicInput.tsx
+++ b/src/app/address/DynamicInput.tsx
@@ -1,6 +1,6 @@
 import { FormFieldItem } from '@bigcommerce/checkout-sdk';
-import { isDate } from 'lodash';
-import React, { FunctionComponent } from 'react';
+import { isDate, noop } from 'lodash';
+import React, { memo, useCallback, FunctionComponent } from 'react';
 import ReactDatePicker from 'react-datepicker';
 
 import { CheckboxInput, InputProps, RadioInput, TextArea, TextInput } from '../ui/form';
@@ -19,17 +19,32 @@ export interface DynamicInputProps extends InputProps {
 const DynamicInput: FunctionComponent<DynamicInputProps> = ({
     additionalClassName,
     fieldType,
+    id,
+    name,
+    onChange = noop,
     options,
     placeholder,
     value,
-    id,
     ...rest
 }) => {
+    const handleDateChange = useCallback((date, event) => onChange({
+        ...event,
+        target: {
+            name,
+            value: date,
+        },
+    }), [
+        onChange,
+        name,
+    ]);
+
     switch (fieldType) {
     case DynamicFormFieldType.dropdown:
         return (
             <select
                 { ...rest as any }
+                name={ name }
+                onChange={ onChange }
                 id={ id }
                 data-test={ `${id}-select` }
                 className="form-select optimizedCheckout-form-select"
@@ -59,6 +74,8 @@ const DynamicInput: FunctionComponent<DynamicInputProps> = ({
         return <>{ options.map(({ label, value: optionValue }) =>
             <RadioInput
                 { ...rest }
+                name={ name }
+                onChange={ onChange }
                 id={ `${id}-${optionValue}` }
                 testId={ `${id}-${optionValue}-radio` }
                 key={ optionValue }
@@ -75,6 +92,8 @@ const DynamicInput: FunctionComponent<DynamicInputProps> = ({
         return <>{ options.map(({ label, value: optionValue }) =>
             <CheckboxInput
                 { ...rest }
+                name={ name }
+                onChange={ onChange }
                 id={ `${id}-${optionValue}` }
                 testId={ `${id}-${optionValue}-checkbox` }
                 key={ optionValue }
@@ -87,18 +106,11 @@ const DynamicInput: FunctionComponent<DynamicInputProps> = ({
         return (
             <ReactDatePicker
                 { ...rest as any }
+                name={ name }
                 // FIXME: we can avoid this by simply using onChangeRaw, but it's not being triggered properly
                 // https://github.com/Hacker0x01/react-datepicker/issues/1357
                 // onChangeRaw={ rest.onChange }
-                onChange={
-                    (date, event) => rest.onChange && rest.onChange({
-                        ...event,
-                        target: {
-                            name: rest.name,
-                            value: date,
-                        },
-                    } as any)
-                }
+                onChange={ handleDateChange }
                 autoComplete="off"
                 placeholderText="MM/DD/YYYY"
                 minDate={ rest.min ? new Date(rest.min) : undefined }
@@ -114,6 +126,8 @@ const DynamicInput: FunctionComponent<DynamicInputProps> = ({
         return (
             <TextArea
                 { ...rest as any }
+                name={ name }
+                onChange={ onChange }
                 id={ id }
                 testId={ `${id}-text` }
                 type={ fieldType }
@@ -125,6 +139,8 @@ const DynamicInput: FunctionComponent<DynamicInputProps> = ({
         return (
             <TextInput
                 { ...rest }
+                name={ name }
+                onChange={ onChange }
                 id={ id }
                 testId={ `${id}-${ fieldType === DynamicFormFieldType.password ?
                     'password' :
@@ -137,4 +153,4 @@ const DynamicInput: FunctionComponent<DynamicInputProps> = ({
     }
 };
 
-export default DynamicInput;
+export default memo(DynamicInput);
diff --git a/src/app/address/MultiCheckboxControl.tsx b/src/app/address/MultiCheckboxControl.tsx
index 3b632e65e9..6569122d23 100644
--- a/src/app/address/MultiCheckboxControl.tsx
+++ b/src/app/address/MultiCheckboxControl.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React, { memo, useCallback, FunctionComponent, MouseEvent } from 'react';
 
 import { TranslatedString } from '../locale';
 
@@ -12,20 +12,28 @@ const MultiCheckboxControl: FunctionComponent<MultiCheckboxControlProps> = ({
     testId,
     onSelectedAll,
     onSelectedNone,
-}) => (
-    <ul className="multiCheckbox--controls">
+}) => {
+    const handleSelectAllClick = useCallback((event: MouseEvent) => {
+        event.preventDefault();
+        onSelectedAll();
+    }, [onSelectedAll]);
+
+    const handleSelectNoneClick = useCallback((event: MouseEvent) => {
+        event.preventDefault();
+        onSelectedNone();
+    }, [onSelectedNone]);
+
+    return <ul className="multiCheckbox--controls">
         <li className="multiCheckbox--control">
             <TranslatedString id="address.select" />
         </li>
+
         <li className="multiCheckbox--control">
             <a
                 data-test={ `${testId}Checkbox-all-button` }
                 href="#"
-                onClick={ e => {
-                    e.preventDefault();
-                    onSelectedAll();
-                }
-            }>
+                onClick={ handleSelectAllClick }
+            >
                 <TranslatedString id="address.select_all" />
             </a>
         </li>
@@ -34,15 +42,11 @@ const MultiCheckboxControl: FunctionComponent<MultiCheckboxControlProps> = ({
             <a
                 data-test={ `${testId}Checkbox-none-button` }
                 href="#"
-                onClick={ e => {
-                    e.preventDefault();
-                    onSelectedNone();
-                }
-            }>
+                onClick={ handleSelectNoneClick }>
                 <TranslatedString id="address.select_none" />
             </a>
         </li>
-    </ul>
-);
+    </ul>;
+};
 
-export default MultiCheckboxControl;
+export default memo(MultiCheckboxControl);
diff --git a/src/app/address/googleAutocomplete/GoogleAutocomplete.tsx b/src/app/address/googleAutocomplete/GoogleAutocomplete.tsx
index b1708f854f..8a47696627 100644
--- a/src/app/address/googleAutocomplete/GoogleAutocomplete.tsx
+++ b/src/app/address/googleAutocomplete/GoogleAutocomplete.tsx
@@ -1,5 +1,5 @@
 import { noop } from 'lodash';
-import React, { Component, ReactNode } from 'react';
+import React, { PureComponent, ReactNode } from 'react';
 
 import { Autocomplete, AutocompleteItem } from '../../ui/autocomplete';
 
@@ -26,7 +26,7 @@ interface GoogleAutocompleteState {
     autoComplete: string;
 }
 
-class GoogleAutocomplete extends Component<GoogleAutocompleteProps, GoogleAutocompleteState> {
+class GoogleAutocomplete extends PureComponent<GoogleAutocompleteProps, GoogleAutocompleteState> {
     googleAutocompleteService: GoogleAutocompleteService;
 
     constructor(props: GoogleAutocompleteProps) {
diff --git a/src/app/address/googleAutocomplete/GoogleAutocompleteFormField.tsx b/src/app/address/googleAutocomplete/GoogleAutocompleteFormField.tsx
index 565423aafe..edaa2b8b8c 100644
--- a/src/app/address/googleAutocomplete/GoogleAutocompleteFormField.tsx
+++ b/src/app/address/googleAutocomplete/GoogleAutocompleteFormField.tsx
@@ -1,5 +1,6 @@
 import { FormField as FormFieldType } from '@bigcommerce/checkout-sdk';
-import React, { FunctionComponent } from 'react';
+import { FieldProps } from 'formik';
+import React, { memo, useCallback, useMemo, FunctionComponent } from 'react';
 
 import { TranslatedString } from '../../locale';
 import { AutocompleteItem } from '../../ui/autocomplete';
@@ -35,36 +36,53 @@ const GoogleAutocompleteFormField: FunctionComponent<GoogleAutocompleteFormField
 }) => {
     const fieldName = parentFieldName ? `${parentFieldName}.${name}` : name;
 
+    const labelContent = useMemo(() => (
+        <TranslatedString id="address.address_line_1_label" />
+    ), []);
+
+    const inputProps = useMemo(() => ({
+        className: 'form-input optimizedCheckout-form-input',
+        id: getFormFieldInputId(name),
+    }), [name]);
+
+    const renderInput = useCallback(({ field }: FieldProps) => (
+        <GoogleAutocomplete
+            apiKey={ apiKey }
+            onSelect={ onSelect }
+            onChange={ onChange }
+            initialValue={ field.value }
+            nextElement={ nextElement }
+            onToggleOpen={ onToggleOpen }
+            isAutocompleteEnabled={ countryCode ?
+                supportedCountries.indexOf(countryCode) > -1 :
+                false
+            }
+            inputProps={ inputProps }
+            componentRestrictions={ countryCode ?
+                { country: countryCode } :
+                undefined
+            }
+        />
+    ), [
+        apiKey,
+        countryCode,
+        inputProps,
+        nextElement,
+        onChange,
+        onSelect,
+        onToggleOpen,
+        supportedCountries,
+    ]);
+
     return (
         <div className={ `dynamic-form-field dynamic-form-field--addressLineAutocomplete` }>
             <FormField
                 name={ fieldName }
-                labelContent={ <TranslatedString id="address.address_line_1_label" />}
-                input={ ({ field }) =>
-                    <GoogleAutocomplete
-                        apiKey={ apiKey }
-                        onSelect={ onSelect }
-                        onChange={ onChange }
-                        initialValue={ field.value }
-                        nextElement={ nextElement }
-                        onToggleOpen={ onToggleOpen }
-                        isAutocompleteEnabled={ countryCode ?
-                            supportedCountries.indexOf(countryCode) > -1 :
-                            false
-                        }
-                        inputProps={ {
-                            className: 'form-input optimizedCheckout-form-input',
-                            id: getFormFieldInputId(name),
-                        } }
-                        componentRestrictions={ countryCode ?
-                            { country: countryCode } :
-                            undefined
-                        }
-                    />
-                }
+                labelContent={ labelContent }
+                input={ renderInput }
             />
         </div>
     );
 };
 
-export default GoogleAutocompleteFormField;
+export default memo(GoogleAutocompleteFormField);
diff --git a/src/app/billing/BillingForm.tsx b/src/app/billing/BillingForm.tsx
index 0f820b805b..17d0499ce6 100644
--- a/src/app/billing/BillingForm.tsx
+++ b/src/app/billing/BillingForm.tsx
@@ -1,6 +1,6 @@
 import { Address, CheckoutSelectors, Country, Customer, FormField } from '@bigcommerce/checkout-sdk';
 import { withFormik, FormikProps } from 'formik';
-import React, { createRef, Component, ReactNode, RefObject } from 'react';
+import React, { createRef, PureComponent, ReactNode, RefObject } from 'react';
 import { lazy } from 'yup';
 
 import { getAddressValidationSchema, isValidCustomerAddress, mapAddressToFormValues, AddressForm, AddressFormValues, AddressSelect } from '../address';
@@ -31,7 +31,7 @@ interface BillingFormState {
     isResettingAddress: boolean;
 }
 
-class BillingForm extends Component<BillingFormProps & WithLanguageProps & FormikProps<BillingFormValues>, BillingFormState> {
+class BillingForm extends PureComponent<BillingFormProps & WithLanguageProps & FormikProps<BillingFormValues>, BillingFormState> {
     state: BillingFormState = {
         isResettingAddress: false,
     };
@@ -66,8 +66,8 @@ class BillingForm extends Component<BillingFormProps & WithLanguageProps & Formi
                                 <AddressSelect
                                     addresses={ addresses }
                                     selectedAddress={ hasValidCustomerAddress ? billingAddress : undefined }
-                                    onUseNewAddress={ () => this.onSelectAddress({}) }
-                                    onSelectAddress={ this.onSelectAddress }
+                                    onUseNewAddress={ this.handleUseNewAddress }
+                                    onSelectAddress={ this.handleSelectAddress }
                                 />
                             </LoadingOverlay>
                         </Fieldset>
@@ -106,7 +106,7 @@ class BillingForm extends Component<BillingFormProps & WithLanguageProps & Formi
         );
     }
 
-    private onSelectAddress: (address: Partial<Address>) => void = async address => {
+    private handleSelectAddress: (address: Partial<Address>) => void = async address => {
         const {
             updateAddress,
             onUnhandledError,
@@ -122,6 +122,10 @@ class BillingForm extends Component<BillingFormProps & WithLanguageProps & Formi
             this.setState({ isResettingAddress: false });
         }
     };
+
+    private handleUseNewAddress: () => void = () => {
+        this.handleSelectAddress({});
+    };
 }
 
 export default withLanguage(withFormik<BillingFormProps & WithLanguageProps, BillingFormValues>({
diff --git a/src/app/common/error/ErrorModal.tsx b/src/app/common/error/ErrorModal.tsx
index 3984f18caa..693bee872e 100644
--- a/src/app/common/error/ErrorModal.tsx
+++ b/src/app/common/error/ErrorModal.tsx
@@ -1,5 +1,5 @@
 import { noop } from 'lodash';
-import React, { Component, Fragment, ReactNode } from 'react';
+import React, { Fragment, PureComponent, ReactNode } from 'react';
 
 import { TranslatedString } from '../../locale';
 import { Button, ButtonSize } from '../../ui/button';
@@ -22,7 +22,7 @@ export interface ErrorModalOnCloseProps {
     error: Error;
 }
 
-class ErrorModal extends Component<ErrorModalProps> {
+class ErrorModal extends PureComponent<ErrorModalProps> {
     render(): ReactNode {
         const { error } = this.props;
 
diff --git a/src/app/common/form/connectFormik.spec.tsx b/src/app/common/form/connectFormik.spec.tsx
index 5e187f5cba..71e002ca87 100644
--- a/src/app/common/form/connectFormik.spec.tsx
+++ b/src/app/common/form/connectFormik.spec.tsx
@@ -6,6 +6,7 @@ import React, { FunctionComponent } from 'react';
 import connectFormik from './connectFormik';
 import ConnectFormikProps from './ConnectFormikProps';
 
+/* eslint-disable react/jsx-no-bind */
 describe('connectFormik()', () => {
     it('only re-renders connected component if Formik props have changed', () => {
         const TestComponent: FunctionComponent = jest.fn(() => <div />);
diff --git a/src/app/ui/autocomplete/Autocomplete.spec.tsx b/src/app/ui/autocomplete/Autocomplete.spec.tsx
index be20ceab70..46d0bc232c 100644
--- a/src/app/ui/autocomplete/Autocomplete.spec.tsx
+++ b/src/app/ui/autocomplete/Autocomplete.spec.tsx
@@ -2,6 +2,8 @@ import { mount, render, ReactWrapper } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import React from 'react';
 
+import { Popover, PopoverList } from '../popover';
+
 import AutocompleteItem from './autocomplete-item';
 import Autocomplete from './Autocomplete';
 
@@ -33,6 +35,7 @@ describe('Autocomplete Component', () => {
             onChange = jest.fn();
             tree = mount(<Autocomplete onChange={ onChange } items={ items }><h1>Bob</h1></Autocomplete>);
             tree.find('input').simulate('change', { target: { value: 'zo' }});
+            tree.render();
         });
 
         it('triggers onChange function', () => {
@@ -40,17 +43,17 @@ describe('Autocomplete Component', () => {
         });
 
         it('renders a PopoverList with the passed items', () => {
-            expect(tree.find('PopoverList').length).toEqual(1);
-            expect(tree.find('PopoverList').find('li').length).toEqual(3);
-            expect(tree.find('PopoverList').find('strong').html()).toEqual('<strong>zo</strong>');
+            expect(tree.find(PopoverList).length).toEqual(1);
+            expect(tree.find(PopoverList).find('li').length).toEqual(3);
+            expect(tree.find(PopoverList).find('strong').html()).toEqual('<strong>zo</strong>');
         });
 
         it('renders a PopoverList with the new value as highlighted text', () => {
-            expect(tree.find('PopoverList').find('strong').html()).toEqual('<strong>zo</strong>');
+            expect(tree.find(PopoverList).find('strong').html()).toEqual('<strong>zo</strong>');
         });
 
         it('renders passed child inside Popover', () => {
-            expect(tree.find('Popover').find('h1').html()).toMatchSnapshot();
+            expect(tree.find(Popover).find('h1').html()).toMatchSnapshot();
         });
     });
 
@@ -75,7 +78,7 @@ describe('Autocomplete Component', () => {
         });
 
         it('closes popover', () => {
-            expect(tree.find('PopoverList').length).toEqual(0);
+            expect(tree.find(PopoverList).length).toEqual(0);
         });
 
         it('populates input field with selected item', () => {
@@ -104,7 +107,7 @@ describe('Autocomplete Component', () => {
         });
 
         it('closes popover', () => {
-            expect(tree.find('PopoverList').length).toEqual(0);
+            expect(tree.find(PopoverList).length).toEqual(0);
         });
 
         it('populates input field with selected item', () => {
diff --git a/src/app/ui/autocomplete/Autocomplete.tsx b/src/app/ui/autocomplete/Autocomplete.tsx
index 1e58e4f8a2..d5353d1661 100644
--- a/src/app/ui/autocomplete/Autocomplete.tsx
+++ b/src/app/ui/autocomplete/Autocomplete.tsx
@@ -1,6 +1,6 @@
 import Downshift, { DownshiftState, StateChangeOptions } from 'downshift';
 import { isNumber, noop } from 'lodash';
-import React, { Component, Fragment, ReactChild, ReactNode } from 'react';
+import React, { Fragment, PureComponent, ReactChild, ReactNode } from 'react';
 
 import { Popover, PopoverList, PopoverListItem } from '../popover';
 
@@ -18,7 +18,7 @@ export interface AutocompleteProps {
     onChange?(value: string, isOpen: boolean): void;
 }
 
-class Autocomplete extends Component<AutocompleteProps> {
+class Autocomplete extends PureComponent<AutocompleteProps> {
     render(): ReactNode {
         const {
             inputProps,
@@ -28,7 +28,6 @@ class Autocomplete extends Component<AutocompleteProps> {
             children,
             onSelect,
             listTestId,
-            onToggleOpen = noop,
         } = this.props;
 
         return (
@@ -36,14 +35,10 @@ class Autocomplete extends Component<AutocompleteProps> {
                 initialInputValue={ initialValue }
                 defaultHighlightedIndex={ 0 }
                 initialHighlightedIndex={ initialHighlightedIndex }
-                onStateChange={ ({ isOpen, inputValue }) => {
-                    if (isOpen !== undefined) {
-                        onToggleOpen({ isOpen, inputValue: inputValue || ''  });
-                    }
-                }}
-                stateReducer={ (state, changes) => this._stateReducer(state, changes) }
+                onStateChange={ this.handleStateChange }
+                stateReducer={ this.stateReducer }
                 onChange={ onSelect }
-                itemToString={ this._itemToString }
+                itemToString={ this.itemToString }
             >
                 {({
                     isOpen,
@@ -62,7 +57,7 @@ class Autocomplete extends Component<AutocompleteProps> {
                                 <PopoverList
                                     testId={ listTestId }
                                     menuProps={ getMenuProps() }
-                                    items={ items.map(item => this._toPopoverItem(item)) }
+                                    items={ items.map(item => this.toPopoverItem(item)) }
                                     highlightedIndex={ isNumber(highlightedIndex) ? highlightedIndex : -1 }
                                     getItemProps={ getItemProps }
                                 />
@@ -75,14 +70,14 @@ class Autocomplete extends Component<AutocompleteProps> {
         );
     }
 
-    private _toPopoverItem(item: AutocompleteItem): PopoverListItem {
+    private toPopoverItem(item: AutocompleteItem): PopoverListItem {
         return {
             ...item,
-            content: this._highlightItem(item),
+            content: this.highlightItem(item),
         };
     }
 
-    private _highlightItem(item: AutocompleteItem): ReactChild[] | ReactChild {
+    private highlightItem(item: AutocompleteItem): ReactChild[] | ReactChild {
         if (!item.highlightedSlices || !item.highlightedSlices.length) {
             return item.label;
         }
@@ -118,11 +113,11 @@ class Autocomplete extends Component<AutocompleteProps> {
         }, [] as ReactChild[]);
     }
 
-    private _itemToString(item?: AutocompleteItem): string {
+    private itemToString(item?: AutocompleteItem): string {
         return item && item.value || '';
     }
 
-    private _stateReducer: (
+    private stateReducer: (
         state: DownshiftState<AutocompleteItem>,
         changes: StateChangeOptions<AutocompleteItem>
     ) => Partial<StateChangeOptions<AutocompleteItem>> = (state, changes) => {
@@ -151,6 +146,14 @@ class Autocomplete extends Component<AutocompleteProps> {
         default:
             return changes;
         }
+        };
+
+    private handleStateChange = ({ isOpen, inputValue }: StateChangeOptions<string>) => {
+        const { onToggleOpen = noop } = this.props;
+
+        if (isOpen !== undefined) {
+            onToggleOpen({ isOpen, inputValue: inputValue || '' });
+        }
     };
 }
 
diff --git a/src/app/ui/form/CheckboxFormField.tsx b/src/app/ui/form/CheckboxFormField.tsx
index 0a7b2538dc..7bc041b476 100644
--- a/src/app/ui/form/CheckboxFormField.tsx
+++ b/src/app/ui/form/CheckboxFormField.tsx
@@ -1,6 +1,6 @@
 import { FieldProps } from 'formik';
 import { kebabCase } from 'lodash';
-import React, { useCallback, Fragment, FunctionComponent, ReactNode } from 'react';
+import React, { memo, useCallback, Fragment, FunctionComponent, ReactNode } from 'react';
 
 import BasicFormField from './BasicFormField';
 import CheckboxInput from './CheckboxInput';
@@ -49,4 +49,4 @@ const CheckboxFormField: FunctionComponent<CheckboxFormFieldProps> = ({
     />;
 };
 
-export default CheckboxFormField;
+export default memo(CheckboxFormField);
diff --git a/src/app/ui/form/FormField.tsx b/src/app/ui/form/FormField.tsx
index 12fa5a1e76..932b783860 100644
--- a/src/app/ui/form/FormField.tsx
+++ b/src/app/ui/form/FormField.tsx
@@ -9,11 +9,11 @@ import Label from './Label';
 export interface FormFieldProps {
     additionalClassName?: string;
     name: string;
+    label?: ReactNode | ((fieldName: string) => ReactNode);
     labelContent?: ReactNode;
     footer?: ReactNode;
     input(field: FieldProps<string>): ReactNode;
     onChange?(value: string): void;
-    label?(fieldName: string): ReactNode;
 }
 
 const FormField: FunctionComponent<FormFieldProps> = ({
@@ -27,7 +27,7 @@ const FormField: FunctionComponent<FormFieldProps> = ({
 }) => {
     const renderField = useCallback(props => (
         <Fragment>
-            { label && label(name) }
+            { label && (typeof label === 'function' ? label(name) : label) }
             { labelContent && !label && <Label htmlFor={ name }>
                 { labelContent }
             </Label> }
diff --git a/src/app/ui/form/index.ts b/src/app/ui/form/index.ts
index 111766ddb8..c7b8db6622 100644
--- a/src/app/ui/form/index.ts
+++ b/src/app/ui/form/index.ts
@@ -23,7 +23,6 @@ export type ChecklistProps = ChecklistProps;
 export type ChecklistItemProps = ChecklistItemProps;
 export type FormContextType = FormContextType;
 export type FormFieldErrorProps = FormFieldErrorProps;
-export type FormContextType = FormContextType;
 export type InputProps = InputProps;
 export type TextAreaProps = TextAreaProps;
 export type TextInputProps = TextInputProps;
diff --git a/src/app/ui/popover/PopoverList.spec.tsx b/src/app/ui/popover/PopoverList.spec.tsx
index 61ebf998e6..1692259e24 100644
--- a/src/app/ui/popover/PopoverList.spec.tsx
+++ b/src/app/ui/popover/PopoverList.spec.tsx
@@ -1,5 +1,4 @@
-import { shallow } from 'enzyme';
-import toJson from 'enzyme-to-json';
+import { mount } from 'enzyme';
 import React from 'react';
 
 import PopoverList from './PopoverList';
@@ -12,19 +11,19 @@ describe('Popover Component', () => {
     ];
 
     it('renders list with passed items', () => {
-        const tree = shallow(<PopoverList items={ items }></PopoverList>);
+        const tree = mount(<PopoverList items={ items }></PopoverList>);
 
-        expect(toJson(tree)).toMatchSnapshot();
+        expect(tree).toMatchSnapshot();
     });
 
     it('renders empty list when empty array is passed', () => {
-        const tree = shallow(<PopoverList items={ [] }></PopoverList>);
+        const tree = mount(<PopoverList items={ [] }></PopoverList>);
 
-        expect(toJson(tree)).toMatchSnapshot();
+        expect(tree).toMatchSnapshot();
     });
 
     it('renders list with highlighted item', () => {
-        const tree = shallow(<PopoverList items={ items } highlightedIndex={ 1 }></PopoverList>);
+        const tree = mount(<PopoverList items={ items } highlightedIndex={ 1 }></PopoverList>);
 
         expect(tree.find('.popoverList-item').at(0).hasClass('is-active')).toBeFalsy();
         expect(tree.find('.popoverList-item').at(1).hasClass('is-active')).toBeTruthy();
@@ -37,12 +36,12 @@ describe('Popover Component', () => {
             <React.Fragment key="2">um</React.Fragment>,
         ];
 
-        const tree = shallow(<PopoverList items={[
+        const tree = mount(<PopoverList items={[
             items[0],
             { content: highlightedContent, id: 'y' },
             items[1],
         ]}></PopoverList>);
 
-        expect(toJson(tree.find('.popoverList-item').at(1))).toMatchSnapshot();
+        expect(tree.find('.popoverList-item').at(1)).toMatchSnapshot();
     });
 });
diff --git a/src/app/ui/popover/PopoverList.tsx b/src/app/ui/popover/PopoverList.tsx
index b1edc74b54..121cd399d8 100644
--- a/src/app/ui/popover/PopoverList.tsx
+++ b/src/app/ui/popover/PopoverList.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React, { memo, FunctionComponent } from 'react';
 
 import './PopoverList.scss';
 
@@ -59,4 +59,4 @@ function getItemClassName(highlightedIndex: number, index: number): string {
     return classes.join(' ');
 }
 
-export default PopoverList;
+export default memo(PopoverList);
diff --git a/src/app/ui/popover/__snapshots__/PopoverList.spec.tsx.snap b/src/app/ui/popover/__snapshots__/PopoverList.spec.tsx.snap
index bb66b72daf..c99474d69b 100644
--- a/src/app/ui/popover/__snapshots__/PopoverList.spec.tsx.snap
+++ b/src/app/ui/popover/__snapshots__/PopoverList.spec.tsx.snap
@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Popover Component renders empty list when empty array is passed 1`] = `""`;
+exports[`Popover Component renders empty list when empty array is passed 1`] = `
+<Memo(PopoverList)
+  items={Array []}
+/>
+`;
 
 exports[`Popover Component renders list with highlighted text 1`] = `
 <li
@@ -31,47 +35,66 @@ exports[`Popover Component renders list with highlighted text 1`] = `
 `;
 
 exports[`Popover Component renders list with passed items 1`] = `
-<ul
-  className="popoverList"
->
-  <li
-    className="popoverList-item"
-    index={0}
-    item={
+<Memo(PopoverList)
+  items={
+    Array [
       Object {
         "content": "Lorem",
         "id": "x",
-      }
-    }
-    key="0"
-  >
-    Lorem
-  </li>
-  <li
-    className="popoverList-item"
-    index={1}
-    item={
+      },
       Object {
         "content": "Ipsum",
         "id": "y",
-      }
-    }
-    key="1"
-  >
-    Ipsum
-  </li>
-  <li
-    className="popoverList-item"
-    index={2}
-    item={
+      },
       Object {
         "content": "Foo",
         "id": "z",
-      }
-    }
-    key="2"
+      },
+    ]
+  }
+>
+  <ul
+    className="popoverList"
   >
-    Foo
-  </li>
-</ul>
+    <li
+      className="popoverList-item"
+      index={0}
+      item={
+        Object {
+          "content": "Lorem",
+          "id": "x",
+        }
+      }
+      key="0"
+    >
+      Lorem
+    </li>
+    <li
+      className="popoverList-item"
+      index={1}
+      item={
+        Object {
+          "content": "Ipsum",
+          "id": "y",
+        }
+      }
+      key="1"
+    >
+      Ipsum
+    </li>
+    <li
+      className="popoverList-item"
+      index={2}
+      item={
+        Object {
+          "content": "Foo",
+          "id": "z",
+        }
+      }
+      key="2"
+    >
+      Foo
+    </li>
+  </ul>
+</Memo(PopoverList)>
 `;