From 6e7a6496e546b2c3c0b7612fcf1999eabb9bf131 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Mon, 10 Feb 2025 19:10:04 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Improve=20the=20Redux=20ho?=
 =?UTF-8?q?ok?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/js/data/common/hooks.js         | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

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 = () => {