@wordpress/data 6.6.1 → 6.9.0

package/src/components/use-select/index.js

@@ -112,17 +112,12 @@ export default function useSelect( mapSelect, deps ) {
 
 	const registry = useRegistry();
 	const isAsync = useAsyncMode();
-	// React can sometimes clear the `useMemo` cache.
-	// We use the cache-stable `useMemoOne` to avoid
-	// losing queues.
-	const queueContext = useMemoOne( () => ( { queue: true } ), [ registry ] );
-	const [ , forceRender ] = useReducer( ( s ) => s + 1, 0 );
 
+	const latestRegistry = useRef( registry );
 	const latestMapSelect = useRef();
 	const latestIsAsync = useRef( isAsync );
 	const latestMapOutput = useRef();
 	const latestMapOutputError = useRef();
-	const isMountedAndNotUnsubscribing = useRef();
 
 	// Keep track of the stores being selected in the _mapSelect function,
 	// and only subscribe to those stores later.
@@ -145,10 +140,17 @@ export default function useSelect( mapSelect, deps ) {
 
 	if ( _mapSelect ) {
 		mapOutput = latestMapOutput.current;
+		const hasReplacedRegistry = latestRegistry.current !== registry;
 		const hasReplacedMapSelect = latestMapSelect.current !== _mapSelect;
+		const hasLeftAsyncMode = latestIsAsync.current && ! isAsync;
 		const lastMapSelectFailed = !! latestMapOutputError.current;
 
-		if ( hasReplacedMapSelect || lastMapSelectFailed ) {
+		if (
+			hasReplacedRegistry ||
+			hasReplacedMapSelect ||
+			hasLeftAsyncMode ||
+			lastMapSelectFailed
+		) {
 			try {
 				mapOutput = wrapSelect( _mapSelect );
 			} catch ( error ) {
@@ -171,45 +173,44 @@ export default function useSelect( mapSelect, deps ) {
 			return;
 		}
 
+		latestRegistry.current = registry;
 		latestMapSelect.current = _mapSelect;
+		latestIsAsync.current = isAsync;
 		latestMapOutput.current = mapOutput;
 		latestMapOutputError.current = undefined;
-		isMountedAndNotUnsubscribing.current = true;
-
-		// This has to run after the other ref updates
-		// to avoid using stale values in the flushed
-		// callbacks or potentially overwriting a
-		// changed `latestMapOutput.current`.
-		if ( latestIsAsync.current !== isAsync ) {
-			latestIsAsync.current = isAsync;
-			renderQueue.flush( queueContext );
-		}
 	} );
 
+	// React can sometimes clear the `useMemo` cache.
+	// We use the cache-stable `useMemoOne` to avoid
+	// losing queues.
+	const queueContext = useMemoOne( () => ( { queue: true } ), [ registry ] );
+	const [ , forceRender ] = useReducer( ( s ) => s + 1, 0 );
+	const isMounted = useRef( false );
+
 	useIsomorphicLayoutEffect( () => {
 		if ( ! hasMappingFunction ) {
 			return;
 		}
 
 		const onStoreChange = () => {
-			if ( isMountedAndNotUnsubscribing.current ) {
-				try {
-					const newMapOutput = wrapSelect( latestMapSelect.current );
-
-					if (
-						isShallowEqual( latestMapOutput.current, newMapOutput )
-					) {
-						return;
-					}
-					latestMapOutput.current = newMapOutput;
-				} catch ( error ) {
-					latestMapOutputError.current = error;
+			try {
+				const newMapOutput = wrapSelect( latestMapSelect.current );
+
+				if ( isShallowEqual( latestMapOutput.current, newMapOutput ) ) {
+					return;
 				}
-				forceRender();
+				latestMapOutput.current = newMapOutput;
+			} catch ( error ) {
+				latestMapOutputError.current = error;
 			}
+			forceRender();
 		};
 
 		const onChange = () => {
+			if ( ! isMounted.current ) {
+				return;
+			}
+
 			if ( latestIsAsync.current ) {
 				renderQueue.add( queueContext, onStoreChange );
 			} else {
@@ -219,17 +220,19 @@ export default function useSelect( mapSelect, deps ) {
 
 		// Catch any possible state changes during mount before the subscription
 		// could be set.
-		onChange();
+		onStoreChange();
 
 		const unsubscribers = listeningStores.current.map( ( storeName ) =>
 			registry.__unstableSubscribeStore( storeName, onChange )
 		);
 
+		isMounted.current = true;
+
 		return () => {
-			isMountedAndNotUnsubscribing.current = false;
 			// The return value of the subscribe function could be undefined if the store is a custom generic store.
 			unsubscribers.forEach( ( unsubscribe ) => unsubscribe?.() );
-			renderQueue.flush( queueContext );
+			renderQueue.cancel( queueContext );
+			isMounted.current = false;
 		};
 		// If you're tempted to eliminate the spread dependencies below don't do it!
 		// We're passing these in from the calling function and want to make sure we're
@@ -238,3 +241,130 @@ export default function useSelect( mapSelect, deps ) {
 
 	return hasMappingFunction ? mapOutput : registry.select( mapSelect );
 }
+
+/**
+ * A variant of the `useSelect` hook that has the same API, but will throw a
+ * suspense Promise if any of the called selectors is in an unresolved state.
+ *
+ * @param {Function} mapSelect Function called on every state change. The
+ *                             returned value is exposed to the component
+ *                             using this hook. The function receives the
+ *                             `registry.suspendSelect` method as the first
+ *                             argument and the `registry` as the second one.
+ * @param {Array}    deps      A dependency array used to memoize the `mapSelect`
+ *                             so that the same `mapSelect` is invoked on every
+ *                             state change unless the dependencies change.
+ *
+ * @return {Object} Data object returned by the `mapSelect` function.
+ */
+export function useSuspenseSelect( mapSelect, deps ) {
+	const _mapSelect = useCallback( mapSelect, deps );
+
+	const registry = useRegistry();
+	const isAsync = useAsyncMode();
+
+	const latestRegistry = useRef( registry );
+	const latestMapSelect = useRef();
+	const latestIsAsync = useRef( isAsync );
+	const latestMapOutput = useRef();
+	const latestMapOutputError = useRef();
+
+	// Keep track of the stores being selected in the `mapSelect` function,
+	// and only subscribe to those stores later.
+	const listeningStores = useRef( [] );
+	const wrapSelect = useCallback(
+		( callback ) =>
+			registry.__unstableMarkListeningStores(
+				() => callback( registry.suspendSelect, registry ),
+				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 = latestMapOutput.current;
+	let mapOutputError = latestMapOutputError.current;
+
+	const hasReplacedRegistry = latestRegistry.current !== registry;
+	const hasReplacedMapSelect = latestMapSelect.current !== _mapSelect;
+	const hasLeftAsyncMode = latestIsAsync.current && ! isAsync;
+
+	if ( hasReplacedRegistry || hasReplacedMapSelect || hasLeftAsyncMode ) {
+		try {
+			mapOutput = wrapSelect( _mapSelect );
+		} catch ( error ) {
+			mapOutputError = error;
+		}
+	}
+
+	useIsomorphicLayoutEffect( () => {
+		latestRegistry.current = registry;
+		latestMapSelect.current = _mapSelect;
+		latestIsAsync.current = isAsync;
+		latestMapOutput.current = mapOutput;
+		latestMapOutputError.current = mapOutputError;
+	} );
+
+	// React can sometimes clear the `useMemo` cache.
+	// We use the cache-stable `useMemoOne` to avoid
+	// losing queues.
+	const queueContext = useMemoOne( () => ( { queue: true } ), [ registry ] );
+	const [ , forceRender ] = useReducer( ( s ) => s + 1, 0 );
+	const isMounted = useRef( false );
+
+	useIsomorphicLayoutEffect( () => {
+		const onStoreChange = () => {
+			try {
+				const newMapOutput = wrapSelect( latestMapSelect.current );
+
+				if ( isShallowEqual( latestMapOutput.current, newMapOutput ) ) {
+					return;
+				}
+				latestMapOutput.current = newMapOutput;
+			} catch ( error ) {
+				latestMapOutputError.current = error;
+			}
+
+			forceRender();
+		};
+
+		const onChange = () => {
+			if ( ! isMounted.current ) {
+				return;
+			}
+
+			if ( latestIsAsync.current ) {
+				renderQueue.add( queueContext, onStoreChange );
+			} else {
+				onStoreChange();
+			}
+		};
+
+		// catch any possible state changes during mount before the subscription
+		// could be set.
+		onStoreChange();
+
+		const unsubscribers = listeningStores.current.map( ( storeName ) =>
+			registry.__unstableSubscribeStore( storeName, onChange )
+		);
+
+		isMounted.current = true;
+
+		return () => {
+			// The return value of the subscribe function could be undefined if the store is a custom generic store.
+			unsubscribers.forEach( ( unsubscribe ) => unsubscribe?.() );
+			renderQueue.cancel( queueContext );
+			isMounted.current = false;
+		};
+	}, [ registry, wrapSelect, depsChangedFlag ] );
+
+	if ( mapOutputError ) {
+		throw mapOutputError;
+	}
+
+	return mapOutput;
+}