Reduce number of media query event listeners attached to window

.changeset/spicy-poets-relax.md

@@ -0,0 +1,5 @@
+---
+'@shopify/react-hooks': patch
+---
+
+Perf: Reduce number of media query event listeners attached to window.

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

@@ -1,25 +1,76 @@
 import {useState, useEffect, useLayoutEffect} from 'react';
 
 type EffectHook = typeof useEffect | typeof useLayoutEffect;
+type Query = string;
+type EventListener = (event: {matches: boolean}) => void;
+type Callback = (matches: boolean) => void;
+
+const hookCallbacks: {
+  [x: Query]: {
+    callbacks: Set<Callback>;
+    eventListener: EventListener;
+    matchMedia: MediaQueryList;
+  };
+} = {};
 
 function createUseMediaFactory(useEffectHook: EffectHook) {
-  return (query: string) => {
+  return (query: Query) => {
     const [match, setMatch] = useState(false);
 
     useEffectHook(() => {
       if (!window || !window.matchMedia) {
         return;
       }
 
-      const matchMedia = window.matchMedia(query);
-      const updateMatch = (event: MediaQueryListEvent) =>
-        setMatch(event.matches);
+      // First time we've seen this media query
+      if (!hookCallbacks[query]) {
+        hookCallbacks[query] = {
+          // Each of these callbacks will be executed in order when the event
+          // fires
+          callbacks: new Set<Callback>(),
+          // Will use .matches for subsequent hook calls referencing the same
+          // query so their initial (client) state is updated correctly.
+          matchMedia: window.matchMedia(query),
 
-      setMatch(matchMedia.matches);
+          // Setup the event listener for this query
+          eventListener: (event: {matches: boolean}) => {
+            for (const hookCallback of hookCallbacks[query].callbacks) {
+              // Don't allow earlier handlers to block later handlers if they
+              // throw an error
+              try {
+                hookCallback(event.matches);
+              } catch (error) {
+                // eslint-disable-next-line no-console
+                console.error(error);
+              }
+            }
+          },
+        };
+
+        // Connect event listener to window events
+        hookCallbacks[query].matchMedia.addListener(
+          hookCallbacks[query].eventListener,
+        );
+      }
+
+      // Update state when the media query changes
+      hookCallbacks[query].callbacks.add(setMatch);
+
+      // Set the state once when useEffect is called
+      setMatch(hookCallbacks[query].matchMedia.matches);
 
-      matchMedia.addListener(updateMatch);
       return () => {
-        matchMedia.removeListener(updateMatch);
+        // Don't listen to this query anymore
+        hookCallbacks[query].callbacks.delete(setMatch);
+
+        // Clean up: If there's no one interested in this query anymore, remove
+        // the event listener from the window.
+        if (hookCallbacks[query].callbacks.size === 0) {
+          hookCallbacks[query].matchMedia.removeListener(
+            hookCallbacks[query].eventListener,
+          );
+          delete hookCallbacks[query];
+        }
       };
     }, [query]);
 

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

@@ -39,6 +39,26 @@ describe('useMedia and useMediaLayout', () => {
       expect(mediaRemoveSpy).toHaveBeenCalled();
     });
 
+    it('only installs a single listener, shared between hooks', () => {
+      const media = mediaQueryList({
+        matches: true,
+      });
+      const mediaAddSpy = jest.spyOn(media, 'addListener');
+      const mediaRemoveSpy = jest.spyOn(media, 'removeListener');
+
+      matchMedia.setMedia(() => media);
+
+      const mockComponent1 = mount(<MockComponent mediaQuery="print" />);
+      const mockComponent2 = mount(<MockComponent mediaQuery="print" />);
+      expect(mediaAddSpy).toHaveBeenCalledTimes(1);
+
+      mockComponent1.unmount();
+      expect(mediaRemoveSpy).not.toHaveBeenCalled();
+
+      mockComponent2.unmount();
+      expect(mediaRemoveSpy).toHaveBeenCalled();
+    });
+
     it('installs new listeners when mediaQuery used by hook changes', () => {
       const media = mediaQueryList({
         matches: true,
@@ -80,7 +100,7 @@ describe('useMedia and useMediaLayout', () => {
       expect(mockComponent.text()).toContain('did not match');
     });
 
-    it('rerenders when the media changes from !match=>match', () => {
+    it('rerenders single when the media changes from !match=>match', () => {
       const media = mediaQueryList({
         matches: false,
       });
@@ -105,5 +125,36 @@ describe('useMedia and useMediaLayout', () => {
 
       expect(mockComponent.text()).toContain('matched');
     });
+
+    it('rerenders multiple components when the media changes from !match=>match', () => {
+      const media = mediaQueryList({
+        matches: false,
+      });
+      const addListenerSpy = jest.spyOn(media, 'addListener');
+      matchMedia.setMedia(() => media);
+
+      const mockComponent = mount(
+        <div>
+          <MockComponent mediaQuery="print" />
+          <MockComponent mediaQuery="print" />
+        </div>,
+      );
+      expect(mockComponent.text()).toContain('did not match');
+
+      expect(addListenerSpy).toHaveBeenCalledTimes(1);
+      mockComponent.act(() => {
+        matchMedia.setMedia(() =>
+          mediaQueryList({
+            matches: true,
+          }),
+        );
+
+        // setMedia API does not actually invoke the listeners registered by the hook, so we must invoke manually
+        const [listener] = addListenerSpy.mock.calls[0];
+        (listener as any)({...media, matches: true});
+      });
+
+      expect(mockComponent.text()).toMatch(/matched.*matched/);
+    });
   });
 });