[react-hooks] initialize Media hooks with correct matches value

.changeset/four-days-type.md

@@ -0,0 +1,5 @@
+---
+'@shopify/react-hooks': major
+---
+
+Media hooks initialized with correct matches value

packages/react-hooks/src/hooks/media.ts

@@ -3,8 +3,16 @@ import {useState, useEffect, useLayoutEffect} from 'react';
 type EffectHook = typeof useEffect | typeof useLayoutEffect;
 
 function createUseMediaFactory(useEffectHook: EffectHook) {
-  return (query: string) => {
-    const [match, setMatch] = useState(false);
+  return (
+    query: string,
+    {ssr, ssrValue}: {ssr?: boolean; ssrValue?: boolean} = {
+      ssr: false,
+      ssrValue: false,
+    },
+  ) => {
+    const [match, setMatch] = useState(() =>
+      ssr ? Boolean(ssrValue) : window.matchMedia(query).matches,
+    );
 
     useEffectHook(() => {
       if (!window || !window.matchMedia) {

packages/react-hooks/src/hooks/tests/media.test.tsx

@@ -5,8 +5,11 @@ import {mount} from '@shopify/react-testing';
 import {useMedia, useMediaLayout} from '../media';
 
 describe('useMedia and useMediaLayout', () => {
+  let matches: boolean[] = [];
+
   beforeEach(() => {
     matchMedia.mock();
+    matches = [];
   });
 
   afterEach(() => {
@@ -17,8 +20,17 @@ describe('useMedia and useMediaLayout', () => {
     ['useMedia', useMedia],
     ['useMediaLayout', useMediaLayout],
   ])('%s', (_, useEffectHook) => {
-    function MockComponent({mediaQuery}: {mediaQuery: string}) {
-      const matchedQuery = useEffectHook(mediaQuery);
+    function MockComponent({
+      mediaQuery,
+      ssr = false,
+      ssrValue = false,
+    }: {
+      mediaQuery: string;
+      ssr?: boolean;
+      ssrValue?: boolean;
+    }) {
+      const matchedQuery = useEffectHook(mediaQuery, {ssr, ssrValue});
+      matches.push(matchedQuery);
       const message = matchedQuery ? 'matched' : 'did not match';
       return <div>{message}</div>;
     }
@@ -66,6 +78,33 @@ describe('useMedia and useMediaLayout', () => {
       );
 
       const mockComponent = mount(<MockComponent mediaQuery="print" />);
+      expect(matches).toStrictEqual([true]);
+      expect(mockComponent.text()).toContain('matched');
+    });
+
+    it('initial render with ssrValue true', () => {
+      matchMedia.setMedia(() =>
+        mediaQueryList({
+          matches: true,
+        }),
+      );
+
+      const mockComponent = mount(
+        <MockComponent mediaQuery="print" ssr ssrValue={true} />,
+      );
+      expect(matches).toStrictEqual([true]);
+      expect(mockComponent.text()).toContain('matched');
+    });
+
+    it('initial render with ssrValue false', () => {
+      matchMedia.setMedia(() =>
+        mediaQueryList({
+          matches: true,
+        }),
+      );
+
+      const mockComponent = mount(<MockComponent mediaQuery="print" ssr />);
+      expect(matches).toStrictEqual([false, true]);
       expect(mockComponent.text()).toContain('matched');
     });
 
@@ -77,6 +116,7 @@ describe('useMedia and useMediaLayout', () => {
       );
 
       const mockComponent = mount(<MockComponent mediaQuery="print" />);
+      expect(matches).toStrictEqual([false]);
       expect(mockComponent.text()).toContain('did not match');
     });