Refactor useMediaQuery with useSyncExternalStore (#48973)

* Compose: Refactor useMediaQuery with useSyncExternalStore

* Update tests

* Return false for the server

* Don't create MediaQueryList from scratch to get value

* Use preferred syntax

* Use the 'mock-match-media' package

* Feedback

package.json

@@ -206,6 +206,7 @@
 		"metro-react-native-babel-preset": "0.70.3",
 		"metro-react-native-babel-transformer": "0.70.3",
 		"mkdirp": "0.5.1",
+		"mock-match-media": "0.4.2",
 		"nock": "12.0.3",
 		"node-fetch": "2.6.1",
 		"node-watch": "0.7.0",

packages/compose/src/hooks/use-media-query/index.js

@@ -1,7 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
+import { useMemo, useSyncExternalStore } from '@wordpress/element';
+
+/**
+ * A new MediaQueryList object for the media query
+ *
+ * @param {string} [query] Media Query.
+ * @return {MediaQueryList|null} A new object for the media query
+ */
+function getMediaQueryList( query ) {
+	if (
+		query &&
+		typeof window !== 'undefined' &&
+		typeof window.matchMedia === 'function'
+	) {
+		return window.matchMedia( query );
+	}
+
+	return null;
+}
 
 /**
  * Runs a media query and returns its value when it changes.
@@ -10,28 +28,33 @@ import { useState, useEffect } from '@wordpress/element';
  * @return {boolean} return value of the media query.
  */
 export default function useMediaQuery( query ) {
-	const [ match, setMatch ] = useState(
-		() =>
-			!! (
-				query &&
-				typeof window !== 'undefined' &&
-				window.matchMedia( query ).matches
-			)
-	);
+	const source = useMemo( () => {
+		const mediaQueryList = getMediaQueryList( query );
 
-	useEffect( () => {
-		if ( ! query ) {
-			return;
-		}
-		const updateMatch = () =>
-			setMatch( window.matchMedia( query ).matches );
-		updateMatch();
-		const list = window.matchMedia( query );
-		list.addListener( updateMatch );
-		return () => {
-			list.removeListener( updateMatch );
+		return {
+			/** @type {(onStoreChange: () => void) => () => void} */
+			subscribe( onStoreChange ) {
+				if ( ! mediaQueryList ) {
+					return () => {};
+				}
+
+				mediaQueryList.addEventListener( 'change', onStoreChange );
+				return () => {
+					mediaQueryList.removeEventListener(
+						'change',
+						onStoreChange
+					);
+				};
+			},
+			getValue() {
+				return mediaQueryList?.matches ?? false;
+			},
 		};
 	}, [ query ] );
 
-	return !! query && match;
+	return useSyncExternalStore(
+		source.subscribe,
+		source.getValue,
+		() => false
+	);
 }

packages/compose/src/hooks/use-media-query/test/index.js

@@ -1,136 +1,74 @@
 /**
  * External dependencies
  */
-import { render, act } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
+import { matchMedia, setMedia, cleanup } from 'mock-match-media';
 
 /**
  * Internal dependencies
  */
 import useMediaQuery from '../';
 
-describe( 'useMediaQuery', () => {
-	let addListener, removeListener;
+const TestComponent = ( { query } ) => {
+	const queryResult = useMediaQuery( query );
+	return `useMediaQuery: ${ queryResult }`;
+};
 
+describe( 'useMediaQuery', () => {
 	beforeAll( () => {
-		jest.spyOn( global, 'matchMedia' );
-
-		addListener = jest.fn();
-		removeListener = jest.fn();
+		window.matchMedia = matchMedia;
 	} );
 
-	afterEach( () => {
-		global.matchMedia.mockClear();
-		addListener.mockClear();
-		removeListener.mockClear();
+	beforeEach( () => {
+		setMedia( {
+			width: '960px',
+		} );
 	} );
 
-	afterAll( () => {
-		global.matchMedia.mockRestore();
+	afterEach( () => {
+		cleanup();
 	} );
 
-	const TestComponent = ( { query } ) => {
-		const queryResult = useMediaQuery( query );
-		return `useMediaQuery: ${ queryResult }`;
-	};
-
 	it( 'should return true when query matches', async () => {
-		global.matchMedia.mockReturnValue( {
-			addListener,
-			removeListener,
-			matches: true,
-		} );
-
-		const { container, unmount } = render(
+		const { container } = render(
 			<TestComponent query="(min-width: 782px)" />
 		);
 
 		expect( container ).toHaveTextContent( 'useMediaQuery: true' );
-
-		unmount();
-
-		expect( removeListener ).toHaveBeenCalled();
 	} );
 
 	it( 'should correctly update the value when the query evaluation matches', async () => {
-		// First render.
-		global.matchMedia.mockReturnValueOnce( {
-			addListener,
-			removeListener,
-			matches: true,
-		} );
-		// The query within useEffect.
-		global.matchMedia.mockReturnValueOnce( {
-			addListener,
-			removeListener,
-			matches: true,
-		} );
-		global.matchMedia.mockReturnValueOnce( {
-			addListener,
-			removeListener,
-			matches: true,
-		} );
-		global.matchMedia.mockReturnValueOnce( {
-			addListener,
-			removeListener,
-			matches: false,
-		} );
-
-		const { container, unmount } = render(
+		const { container } = render(
 			<TestComponent query="(min-width: 782px)" />
 		);
 
 		expect( container ).toHaveTextContent( 'useMediaQuery: true' );
 
-		let updateMatchFunction;
-		await act( async () => {
-			updateMatchFunction = addListener.mock.calls[ 0 ][ 0 ];
-			updateMatchFunction();
+		act( () => {
+			setMedia( {
+				width: '600px',
+			} );
 		} );
 
 		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
-
-		unmount();
-
-		expect( removeListener ).toHaveBeenCalledWith( updateMatchFunction );
 	} );
 
 	it( 'should return false when the query does not matches', async () => {
-		global.matchMedia.mockReturnValue( {
-			addListener,
-			removeListener,
-			matches: false,
-		} );
-
-		const { container, unmount } = render(
-			<TestComponent query="(min-width: 782px)" />
+		const { container } = render(
+			<TestComponent query="(max-width: 782px)" />
 		);
 
 		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
-
-		unmount();
-
-		expect( removeListener ).toHaveBeenCalled();
 	} );
 
-	it( 'should not call matchMedia if a query is not passed', async () => {
-		global.matchMedia.mockReturnValue( {
-			addListener,
-			removeListener,
-			matches: false,
-		} );
-
-		const { container, rerender, unmount } = render( <TestComponent /> );
+	it( 'should return false when a query is not passed', async () => {
+		const { container, rerender } = render( <TestComponent /> );
 
 		// Query will be case to a boolean to simplify the return type.
 		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
 
 		rerender( <TestComponent query={ false } /> );
 
 		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
-
-		unmount();
-		expect( global.matchMedia ).not.toHaveBeenCalled();
-		expect( addListener ).not.toHaveBeenCalled();
-		expect( removeListener ).not.toHaveBeenCalled();
 	} );
 } );