Create DebouncedValidatedTextInput component (https://github.com/woocommerce/woocommerce-blocks/pull/3108)

* Fix wrong Form component name

* Split CheckoutForm into smaller components for each step

* Centralize call to useCheckoutAddress

* Create DebouncedValidatedTextInput component

* Rename some variables

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/address-form/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
-import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
+import { DebouncedValidatedTextInput } from '@woocommerce/base-components/text-input';
 import {
 	BillingCountryInput,
 	ShippingCountryInput,
@@ -172,7 +172,7 @@ const AddressForm = ( {
 				}
 
 				return (
-					<ValidatedTextInput
+					<DebouncedValidatedTextInput
 						key={ field.key }
 						id={ `${ id }-${ field.key }` }
 						className={ `wc-block-components-address-form__${ field.key }` }

plugins/woocommerce-blocks/assets/js/base/components/state-input/state-input.js

@@ -10,7 +10,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { ValidatedTextInput } from '../text-input';
+import { DebouncedValidatedTextInput } from '../text-input';
 import { ValidatedSelect } from '../select';
 import './style.scss';
 
@@ -100,7 +100,7 @@ const StateInput = ( {
 		);
 	}
 	return (
-		<ValidatedTextInput
+		<DebouncedValidatedTextInput
 			className={ className }
 			id={ id }
 			label={ label }

plugins/woocommerce-blocks/assets/js/base/components/text-input/debounced-validated.js

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
+import { useShallowEqual } from '@woocommerce/base-hooks';
+import { useDebouncedCallback } from 'use-debounce';
+import PropTypes from 'prop-types';
+
+const DebouncedValidatedTextInput = ( { onChange, value = '', ...props } ) => {
+	// Keep a local copy of the value so we can debounce updates.
+	const [ inputValue, setInputValue ] = useState( value );
+	const [ debouncedCallback ] = useDebouncedCallback( ( newValue ) => {
+		onChange( newValue );
+	}, 400 );
+	const debouncedOnChange = useShallowEqual( debouncedCallback );
+	useEffect( () => {
+		debouncedOnChange( inputValue );
+	}, [ debouncedOnChange, inputValue ] );
+
+	return (
+		<ValidatedTextInput
+			onChange={ setInputValue }
+			value={ inputValue }
+			{ ...props }
+		/>
+	);
+};
+
+DebouncedValidatedTextInput.propTypes = {
+	onChange: PropTypes.func.isRequired,
+	value: PropTypes.string,
+};
+
+export default DebouncedValidatedTextInput;

plugins/woocommerce-blocks/assets/js/base/components/text-input/index.js

@@ -110,3 +110,4 @@ TextInput.propTypes = {
 
 export default TextInput;
 export { default as ValidatedTextInput } from './validated';
+export { default as DebouncedValidatedTextInput } from './debounced-validated';

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/contact-fields-step.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { FormStep } from '@woocommerce/base-components/cart-checkout';
-import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
+import { DebouncedValidatedTextInput } from '@woocommerce/base-components/text-input';
 import { useCheckoutContext } from '@woocommerce/base-context';
 
 /**
@@ -29,7 +29,7 @@ const ContactFieldsStep = ( { emailValue, onChangeEmail } ) => {
 			) }
 			stepHeadingContent={ () => <LoginPrompt /> }
 		>
-			<ValidatedTextInput
+			<DebouncedValidatedTextInput
 				id="email"
 				type="email"
 				label={ __( 'Email address', 'woo-gutenberg-products-block' ) }

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/form/shipping-fields-step.js

@@ -6,7 +6,7 @@ import {
 	AddressForm,
 	FormStep,
 } from '@woocommerce/base-components/cart-checkout';
-import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
+import { DebouncedValidatedTextInput } from '@woocommerce/base-components/text-input';
 import CheckboxControl from '@woocommerce/base-components/checkbox-control';
 import { useCheckoutContext } from '@woocommerce/base-context';
 import PropTypes from 'prop-types';
@@ -44,7 +44,7 @@ const ShippingFieldsStep = ( {
 				fieldConfig={ addressFieldsConfig }
 			/>
 			{ showPhoneField && (
-				<ValidatedTextInput
+				<DebouncedValidatedTextInput
 					id="phone"
 					type="tel"
 					label={