From 886bb15ed0bd2de9046ad1fcec76528b4b5637c0 Mon Sep 17 00:00:00 2001
From: Omar Alshaker <omar@omaralshaker.com>
Date: Fri, 17 Apr 2020 18:50:12 +0200
Subject: [PATCH] Make useMediaQuery return the correct value on the first
 render (#21682)

---
 .../src/hooks/use-media-query/index.js        |  5 ++++-
 .../src/hooks/use-media-query/test/index.js   | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/compose/src/hooks/use-media-query/index.js b/packages/compose/src/hooks/use-media-query/index.js
index e863503ba940b..63168c218a6e5 100644
--- a/packages/compose/src/hooks/use-media-query/index.js
+++ b/packages/compose/src/hooks/use-media-query/index.js
@@ -10,7 +10,10 @@ import { useState, useEffect } from '@wordpress/element';
  * @return {boolean} return value of the media query.
  */
 export default function useMediaQuery( query ) {
-	const [ match, setMatch ] = useState( false );
+	const [ match, setMatch ] = useState(
+		query && window.matchMedia( query ).matches
+	);
+
 	useEffect( () => {
 		if ( ! query ) {
 			return;
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 a256a4b440bec..b6145debdfc6c 100644
--- a/packages/compose/src/hooks/use-media-query/test/index.js
+++ b/packages/compose/src/hooks/use-media-query/test/index.js
@@ -33,6 +33,18 @@ describe( 'useMediaQuery', () => {
 		return `useMediaQuery: ${ queryResult }`;
 	};
 
+	it( 'should return true when query matches on the first render', async () => {
+		global.matchMedia.mockReturnValue( {
+			addListener,
+			removeListener,
+			matches: true,
+		} );
+
+		const root = create( <TestComponent query="(min-width: 782px)" /> );
+
+		expect( root.toJSON() ).toBe( 'useMediaQuery: true' );
+	} );
+
 	it( 'should return true when query matches', async () => {
 		global.matchMedia.mockReturnValue( {
 			addListener,
@@ -55,6 +67,13 @@ describe( 'useMediaQuery', () => {
 	} );
 
 	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,