Checkout: Modify useCreateExistingCards to only rememoize only when ids change

[sirbrillig]

The useCreateExistingCards hook creates composite-checkout payment method objects and has a dependency on an array of objects from the stored cards endpoint. Previously, the payment methods were recreated any time the stored cards array changed. Since the array is an object, this is an referential equality check.

Here, we change the hook such that it will only recreate the payment methods if the ids of the stored cards change. Since the ids are numbers or strings, this is a primitive value check.

This will make it easier to call the hook without recreating the payment methods each time since the stored card data typically comes from the getStoredCards selector which always returns a new array.

This is part of #48966

Testing instructions

• Visit checkout when you have no stored cards and be sure that there are no errors.
• Visit checkout with some stored cards and be sure there are no errors and that your stored cards show up as payment methods.

[matticbot]

Test live: https://calypso.live/?branch=update/use-create-existing-cards-memoize-on-id

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~353 bytes added 📈 [gzipped])

name            parsed_size           gzip_size
site-purchases       +415 B  (+0.0%)     +113 B  (+0.0%)
purchases            +415 B  (+0.0%)     +121 B  (+0.0%)
checkout             +415 B  (+0.0%)     +119 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~121 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-blocks-editor-checkout-modal       +415 B  (+0.0%)     +121 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[nbloomf]

I tested by entering checkout with stored cards, viewing the list of payment methods, then (in a separate tab) deleting my stored cards, and reloading checkout. In both cases the payment method list behaved as expected with no errors or warnings.