diff --git a/modules/ppcp-settings/resources/js/data/common/hooks.js b/modules/ppcp-settings/resources/js/data/common/hooks.js index bac0b2959..3ba658200 100644 --- a/modules/ppcp-settings/resources/js/data/common/hooks.js +++ b/modules/ppcp-settings/resources/js/data/common/hooks.js @@ -8,7 +8,7 @@ */ import { useDispatch, useSelect } from '@wordpress/data'; -import { useCallback, useEffect, useState } from '@wordpress/element'; +import { useCallback, useEffect, useMemo, useState } from '@wordpress/element'; import { createHooksForStore } from '../utils'; import { STORE_NAME } from './constants'; @@ -36,10 +36,6 @@ const useHooks = () => { const [ isManualConnectionMode, setManualConnectionMode ] = usePersistent( 'useManualConnection' ); - const merchant = useSelect( - ( select ) => select( STORE_NAME ).merchant(), - [] - ); // Read-only properties. const wooSettings = useSelect( @@ -78,7 +74,6 @@ const useHooks = () => { productionOnboardingUrl, authenticateWithCredentials, authenticateWithOAuth, - merchant, wooSettings, features, webhooks, @@ -169,18 +164,25 @@ export const useMerchantInfo = () => { // Read-only access to the sanitized merchant details. export const useMerchant = () => { - const { merchant } = useHooks(); + const merchant = useSelect( + ( select ) => select( STORE_NAME ).merchant(), + [] + ); - return { - isConnected: merchant.isConnected ?? false, - isSandbox: merchant.isSandbox ?? true, - id: merchant.id ?? '', - email: merchant.email ?? '', - clientId: merchant.clientId ?? '', - clientSecret: merchant.clientSecret ?? '', - isBusinessSeller: 'business' === merchant.sellerType, - isCasualSeller: 'personal' === merchant.sellerType, - }; + return useMemo( + () => ( { + isConnected: merchant.isConnected ?? false, + isSandbox: merchant.isSandbox ?? true, + id: merchant.id ?? '', + email: merchant.email ?? '', + clientId: merchant.clientId ?? '', + clientSecret: merchant.clientSecret ?? '', + isBusinessSeller: 'business' === merchant.sellerType, + isCasualSeller: 'personal' === merchant.sellerType, + } ), + // the merchant object is stable, so a new memo is only generated when a merchant prop changes. + [ merchant ] + ); }; export const useActiveModal = () => {