From 6a677005d508493931d7a1aa5f9c63f76632d4f4 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 23 Apr 2024 15:40:06 +0300 Subject: [PATCH 1/3] useMatchMedia: cache queries --- .../compose/src/hooks/use-media-query/index.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/compose/src/hooks/use-media-query/index.js b/packages/compose/src/hooks/use-media-query/index.js index 59e6e5d99a4af3..e2ba247b9adf5c 100644 --- a/packages/compose/src/hooks/use-media-query/index.js +++ b/packages/compose/src/hooks/use-media-query/index.js @@ -3,6 +3,8 @@ */ import { useMemo, useSyncExternalStore } from '@wordpress/element'; +const matchMediaCache = new Map(); + /** * A new MediaQueryList object for the media query * @@ -10,12 +12,21 @@ import { useMemo, useSyncExternalStore } from '@wordpress/element'; * @return {MediaQueryList|null} A new object for the media query */ function getMediaQueryList( query ) { + if ( ! query ) { + return null; + } + + if ( matchMediaCache.has( query ) ) { + return matchMediaCache.get( query ); + } + if ( - query && typeof window !== 'undefined' && typeof window.matchMedia === 'function' ) { - return window.matchMedia( query ); + const match = window.matchMedia( query ); + matchMediaCache.set( query, match ); + return match; } return null; From 9c39424067f4192ad3fe7c97c29a65e59e58b23e Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 23 Apr 2024 15:42:52 +0300 Subject: [PATCH 2/3] Avoid .has --- packages/compose/src/hooks/use-media-query/index.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/compose/src/hooks/use-media-query/index.js b/packages/compose/src/hooks/use-media-query/index.js index e2ba247b9adf5c..598ab006ecb747 100644 --- a/packages/compose/src/hooks/use-media-query/index.js +++ b/packages/compose/src/hooks/use-media-query/index.js @@ -16,15 +16,17 @@ function getMediaQueryList( query ) { return null; } - if ( matchMediaCache.has( query ) ) { - return matchMediaCache.get( query ); + let match = matchMediaCache.get( query ); + + if ( match ) { + return match; } if ( typeof window !== 'undefined' && typeof window.matchMedia === 'function' ) { - const match = window.matchMedia( query ); + match = window.matchMedia( query ); matchMediaCache.set( query, match ); return match; } From 6a9e0476005a4539a2bef2173d1a79b05a21f272 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 23 Apr 2024 16:34:04 +0300 Subject: [PATCH 3/3] Fix unit tests --- packages/compose/src/hooks/use-media-query/test/index.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/compose/src/hooks/use-media-query/test/index.js b/packages/compose/src/hooks/use-media-query/test/index.js index 88b2c1b0a3bd24..f8a61a8469c070 100644 --- a/packages/compose/src/hooks/use-media-query/test/index.js +++ b/packages/compose/src/hooks/use-media-query/test/index.js @@ -2,7 +2,7 @@ * External dependencies */ import { act, render } from '@testing-library/react'; -import { matchMedia, setMedia, cleanup } from 'mock-match-media'; +import { matchMedia, setMedia } from 'mock-match-media'; /** * Internal dependencies @@ -26,10 +26,11 @@ describe( 'useMediaQuery', () => { } ); afterEach( () => { - cleanup(); + // Do not clean up, this will break our cache. Browsers also do not + // reset media queries. } ); - it( 'should return true when query matches', async () => { + it( 'should return true when the query matches', async () => { const { container } = render( ); @@ -53,7 +54,7 @@ describe( 'useMediaQuery', () => { expect( container ).toHaveTextContent( 'useMediaQuery: false' ); } ); - it( 'should return false when the query does not matches', async () => { + it( 'should return false when the query does not match', async () => { const { container } = render( );