Debounce billingData to be used as a dependency on the useEffect hook

[tjcafferkey]

Description

Debounce billingData to be used as a dependency in the useEffect hook. Debouncing is necessary to prevent an excessive amount of useEffect executions.

Fixes #4766

Testing

Automated Tests

• Changes in this PR are covered by Automated Tests.
  • Unit tests
  • E2E tests

Manual Testing

How to test the changes in this Pull Request:

1. Add the following snippet to the top of the changed file (assets/js/base/context/providers/cart-checkout/payment-methods/use-payment-method-registration.ts) for the purpose of testing only.

registerPaymentMethodExtensionCallbacks( 'woocommerce-marketplace-extension', {
	cod: ( arg ) => arg.billingData.first_name === 'Tom',
} );

and add registerPaymentMethodExtensionCallbacks to the existing import of '@woocommerce/blocks-registry'

2. On the checkout input a first name which is not "Tom" in the Billing Address section. Cash on Delivery option should not be available as a payment method.
3. Update this to be "Tom" and observe the change to the payment methods which now should show Cash on Delivery as a valid option.

Changelog

usePaymentMethodRegistration: Debounce billingData updates.

[github-actions]

Size Change: +140 B (0%)

Total Size: 1.11 MB

Filename	Size	Change
build/active-filters-frontend.js	8.4 kB	-1 B (0%)
build/active-filters.js	8 kB	-1 B (0%)
build/all-products-frontend.js	23.1 kB	-1 B (0%)
build/all-reviews.js	9.64 kB	+3 B (0%)
build/atomic-block-components/add-to-cart-frontend.js	8.38 kB	-1 B (0%)
build/atomic-block-components/button-frontend.js	1.74 kB	-1 B (0%)
build/atomic-block-components/price-frontend.js	2.09 kB	-2 B (0%)
build/attribute-filter-frontend.js	18.1 kB	+2 B (0%)
build/attribute-filter.js	12 kB	+2 B (0%)
build/cart-frontend.js	91.6 kB	+34 B (0%)
build/cart.js	46.4 kB	+25 B (0%)
build/checkout-frontend.js	54.5 kB	+42 B (0%)
build/checkout.js	52.3 kB	+27 B (0%)
build/featured-category.js	7.79 kB	-2 B (0%)
build/featured-product.js	9.5 kB	-2 B (0%)
build/mini-cart-component-frontend.js	36.8 kB	+5 B (0%)
build/product-best-sellers.js	6.69 kB	+1 B (0%)
build/product-category.js	7.56 kB	+2 B (0%)
build/product-new.js	6.84 kB	+1 B (0%)
build/product-top-rated.js	6.81 kB	+1 B (0%)
build/reviews-by-category.js	11.5 kB	+1 B (0%)
build/reviews-by-product.js	13.1 kB	+5 B (0%)
build/single-product-frontend.js	26.2 kB	+1 B (0%)
build/single-product.js	9.78 kB	-2 B (0%)
build/stock-filter-frontend.js	8.82 kB	-1 B (0%)
build/stock-filter.js	7.81 kB	+1 B (0%)
build/vendors--atomic-block-components/add-to-cart--checkout-blocks/billing-address--checkout-blocks/orde--63cde524-frontend.js	16.2 kB	-3 B (0%)
build/wc-blocks-vendors.js	254 kB	+4 B (0%)

ℹ️ View Unchanged

Filename	Size
build/all-products.js	37.1 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js	2.66 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js	1.82 kB
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js	334 B
build/atomic-block-components/add-to-cart.js	7.72 kB
build/atomic-block-components/button.js	873 B
build/atomic-block-components/category-list-frontend.js	469 B
build/atomic-block-components/category-list.js	476 B
build/atomic-block-components/image-frontend.js	1.88 kB
build/atomic-block-components/image.js	1.35 kB
build/atomic-block-components/price.js	2.11 kB
build/atomic-block-components/rating-frontend.js	564 B
build/atomic-block-components/rating.js	567 B
build/atomic-block-components/sale-badge-frontend.js	859 B
build/atomic-block-components/sale-badge.js	867 B
build/atomic-block-components/sku-frontend.js	392 B
build/atomic-block-components/sku.js	393 B
build/atomic-block-components/stock-indicator-frontend.js	611 B
build/atomic-block-components/stock-indicator.js	611 B
build/atomic-block-components/summary-frontend.js	904 B
build/atomic-block-components/summary.js	911 B
build/atomic-block-components/tag-list-frontend.js	466 B
build/atomic-block-components/tag-list.js	472 B
build/atomic-block-components/title-frontend.js	1.44 kB
build/atomic-block-components/title.js	1.29 kB
build/blocks-checkout.js	21 kB
build/checkout-blocks/actions-frontend.js	1.47 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	5.02 kB
build/checkout-blocks/billing-address-frontend.js	1.15 kB
build/checkout-blocks/contact-information-frontend.js	3.88 kB
build/checkout-blocks/express-payment--checkout-blocks/payment-frontend.js	4.82 kB
build/checkout-blocks/express-payment-frontend.js	1.83 kB
build/checkout-blocks/fields-frontend.js	290 B
build/checkout-blocks/order-note-frontend.js	1.56 kB
build/checkout-blocks/order-summary-frontend.js	12.6 kB
build/checkout-blocks/payment-frontend.js	4.52 kB
build/checkout-blocks/sample-frontend.js	249 B
build/checkout-blocks/shipping-address-frontend.js	1.62 kB
build/checkout-blocks/shipping-methods-frontend.js	5.55 kB
build/checkout-blocks/terms-frontend.js	1.64 kB
build/checkout-blocks/totals-frontend.js	269 B
build/handpicked-products.js	6.33 kB
build/mini-cart-frontend.js	2.35 kB
build/mini-cart.js	2.34 kB
build/price-filter-frontend.js	14.4 kB
build/price-filter.js	9.69 kB
build/price-format.js	1.37 kB
build/product-categories.js	3.38 kB
build/product-on-sale.js	7.19 kB
build/product-search.js	2.66 kB
build/product-tag.js	6.65 kB
build/products-by-attribute.js	7.77 kB
build/reviews-frontend.js	8.98 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js	4.78 kB
build/vendors--atomic-block-components/price--checkout-blocks/order-summary--checkout-blocks/shipping-methods-frontend.js	5.71 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/order-summary--checkout-blocks/shipping-address-frontend.js	5.03 kB
build/vendors--checkout-blocks/order-summary-frontend.js	3.11 kB
build/wc-blocks-data.js	11.1 kB
build/wc-blocks-editor-style-rtl.css	15.5 kB
build/wc-blocks-editor-style.css	15.5 kB
build/wc-blocks-google-analytics.js	1.98 kB
build/wc-blocks-middleware.js	1.47 kB
build/wc-blocks-registry.js	3.73 kB
build/wc-blocks-shared-context.js	1.54 kB
build/wc-blocks-shared-hocs.js	1.75 kB
build/wc-blocks-style-rtl.css	20.1 kB
build/wc-blocks-style.css	20.1 kB
build/wc-blocks-vendors-style-rtl.css	1.37 kB
build/wc-blocks-vendors-style.css	1.37 kB
build/wc-blocks.js	3.5 kB
build/wc-payment-method-bacs.js	806 B
build/wc-payment-method-cheque.js	806 B
build/wc-payment-method-cod.js	898 B
build/wc-payment-method-paypal.js	839 B
build/wc-payment-method-stripe.js	12.2 kB
build/wc-settings.js	2.91 kB

_{compressed-size-action}

[senadir]

Hey @tjcafferkey
While this PR is correct and is doing what the issue asked for, the discussion around this evolved and instead of debouncing billingData, we're looking at throttling refreshMakePayment.
You can see the lengthy thread here p1632135581442800/1632126365.428300-slack-C8X6Q7XQU

The gist of it is that, while we can debounce billingData, it's just one thing that can trigger refreshMakePayment 1 too many times, and a better approch would be to throttle refreshMakePayment. This would save us from debouncing billingData, cart, cartTotals, and any other variable that changes too much that we add to that hook.

cc @ralucaStan and @nerrad

[ralucaStan]

This tests out 👍.

[tjcafferkey]

@senadir would it make sense to merge this PR given its a fix and then reopen another issue with the proposed solution you've outlined in your comment? This way it's better than what it was but agreed not ideal.

[senadir]

Sure thing! Just mark that line with a @todo and an issue would be automatically created for you.

[ralucaStan]

Closed by #4776