useEvent to avoid memoization

WordPress · Nov 26, 2024 · ca9164f · ca9164f
1 parent a5d9759
commit ca9164f
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 44 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/router/package.json b/packages/router/package.json
@@ -29,6 +29,7 @@
 	"types": "build-types",
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
+		"@wordpress/compose": "*",
 		"@wordpress/element": "*",
 		"@wordpress/private-apis": "*",
 		"@wordpress/url": "*",

diff --git a/packages/router/src/router.tsx b/packages/router/src/router.tsx
@@ -19,6 +19,7 @@ import {
 	getPath,
 	buildQueryString,
 } from '@wordpress/url';
+import { useEvent } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -91,53 +92,58 @@ export function useLocation() {
 
 export function useHistory() {
 	const { pathArg, beforeNavigate } = useContext( ConfigContext );
-	return useMemo(
-		() => ( {
-			navigate( rawPath: string, options: NavigationOptions = {} ) {
-				const query = getQueryArgs( rawPath );
-				const path = getPath( 'http://domain.com/' + rawPath ) ?? '';
-				const performPush = () => {
-					const result = beforeNavigate
-						? beforeNavigate( { path, query } )
-						: { path, query };
-					return history.push(
-						{
-							search: buildQueryString( {
-								[ pathArg ]: result.path,
-								...result.query,
-							} ),
-						},
-						options.state
-					);
-				};
-
-				/*
-				 * Skip transition in mobile, otherwise it crashes the browser.
-				 * See: https://github.com/WordPress/gutenberg/pull/63002.
-				 */
-				const isMediumOrBigger =
-					window.matchMedia( '(min-width: 782px)' ).matches;
-				if (
-					! isMediumOrBigger ||
-					// @ts-expect-error
-					! document.startViewTransition ||
-					! options.transition
-				) {
-					return performPush();
-				}
-				document.documentElement.classList.add( options.transition );
+
+	const navigate = useEvent(
+		( rawPath: string, options: NavigationOptions = {} ) => {
+			const query = getQueryArgs( rawPath );
+			const path = getPath( 'http://domain.com/' + rawPath ) ?? '';
+			const performPush = () => {
+				const result = beforeNavigate
+					? beforeNavigate( { path, query } )
+					: { path, query };
+				return history.push(
+					{
+						search: buildQueryString( {
+							[ pathArg ]: result.path,
+							...result.query,
+						} ),
+					},
+					options.state
+				);
+			};
+
+			/*
+			 * Skip transition in mobile, otherwise it crashes the browser.
+			 * See: https://github.com/WordPress/gutenberg/pull/63002.
+			 */
+			const isMediumOrBigger =
+				window.matchMedia( '(min-width: 782px)' ).matches;
+			if (
+				! isMediumOrBigger ||
 				// @ts-expect-error
-				const transition = document.startViewTransition( () =>
-					performPush()
+				! document.startViewTransition ||
+				! options.transition
+			) {
+				return performPush();
+			}
+			document.documentElement.classList.add( options.transition );
+			// @ts-expect-error
+			const transition = document.startViewTransition( () =>
+				performPush()
+			);
+			transition.finished.finally( () => {
+				document.documentElement.classList.remove(
+					options.transition ?? ''
 				);
-				transition.finished.finally( () => {
-					document.documentElement.classList.remove(
-						options.transition ?? ''
-					);
-				} );
-			},
+			} );
+		}
+	);
+
+	return useMemo(
+		() => ( {
+			navigate,
 		} ),
-		[ pathArg, beforeNavigate ]
+		[ navigate ]
 	);
 }
 

diff --git a/packages/router/tsconfig.json b/packages/router/tsconfig.json
@@ -7,6 +7,7 @@
 		"types": [ "gutenberg-env" ]
 	},
 	"references": [
+		{ "path": "../compose" },
 		{ "path": "../element" },
 		{ "path": "../private-apis" },
 		{ "path": "../url" }