Minimize the calls in useSelect by subscribing to only the stores needed

packages/data/src/components/use-select/index.js

@@ -13,6 +13,7 @@ import {
 	useCallback,
 	useEffect,
 	useReducer,
+	useMemo,
 } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
@@ -94,14 +95,33 @@ export default function useSelect( _mapSelect, deps ) {
 	const latestMapOutputError = useRef();
 	const isMountedAndNotUnsubscribing = useRef();
 
+	// Keep track of the stores being selected in the mapSelect function,
+	// and only subscribe to those stores later.
+	const listeningStores = useRef( [] );
+	const trapSelect = useCallback(
+		( callback ) =>
+			registry.__experimentalMarkListeningStores(
+				callback,
+				listeningStores
+			),
+		[ registry ]
+	);
+
+	// Generate a "flag" for used in the effect dependency array.
+	// It's different than just using `mapSelect` since deps could be undefined,
+	// in that case, we would still want to memoize it.
+	const depsChangedFlag = useMemo( () => ( {} ), deps || [] );
+
 	let mapOutput;
 
 	try {
 		if (
 			latestMapSelect.current !== mapSelect ||
 			latestMapOutputError.current
 		) {
-			mapOutput = mapSelect( registry.select, registry );
+			mapOutput = trapSelect( () =>
+				mapSelect( registry.select, registry )
+			);
 		} else {
 			mapOutput = latestMapOutput.current;
 		}
@@ -140,10 +160,10 @@ export default function useSelect( _mapSelect, deps ) {
 		const onStoreChange = () => {
 			if ( isMountedAndNotUnsubscribing.current ) {
 				try {
-					const newMapOutput = latestMapSelect.current(
-						registry.select,
-						registry
+					const newMapOutput = trapSelect( () =>
+						latestMapSelect.current( registry.select, registry )
 					);
+
 					if (
 						isShallowEqual( latestMapOutput.current, newMapOutput )
 					) {
@@ -165,20 +185,25 @@ export default function useSelect( _mapSelect, deps ) {
 			onStoreChange();
 		}
 
-		const unsubscribe = registry.subscribe( () => {
+		const onChange = () => {
 			if ( latestIsAsync.current ) {
 				renderQueue.add( queueContext, onStoreChange );
 			} else {
 				onStoreChange();
 			}
-		} );
+		};
+
+		const unsubscribe = registry.__experimentalSubscribeStores(
+			listeningStores.current,
+			onChange
+		);
 
 		return () => {
 			isMountedAndNotUnsubscribing.current = false;
 			unsubscribe();
 			renderQueue.flush( queueContext );
 		};
-	}, [ registry ] );
+	}, [ registry, trapSelect, depsChangedFlag ] );
 
 	return mapOutput;
 }