Impl cleanupBreakpointListener

packages/app/src/stores/ui.tsx

@@ -4,7 +4,7 @@ import {
   isClient, isServer, pagePathUtils, Nullable, PageGrant,
 } from '@growi/core';
 import { withUtils, SWRResponseWithUtils } from '@growi/core/src/utils/with-utils';
-import { Breakpoint, addBreakpointListener } from '@growi/ui';
+import { Breakpoint, addBreakpointListener, cleanupBreakpointListener } from '@growi/ui';
 import SimpleBar from 'simplebar-react';
 import {
   useSWRConfig, SWRResponse, Key, Fetcher,
@@ -190,6 +190,10 @@ export const useIsDeviceSmallerThanMd = (): SWRResponse<boolean, Error> => {
       if (cache.get(key) == null) {
         mutate(key, !mql.matches);
       }
+
+      return () => {
+        cleanupBreakpointListener(mql, mdOrAvobeHandler);
+      };
     }
   }, [cache, key, mutate]);
 
@@ -214,6 +218,10 @@ export const useIsDeviceSmallerThanLg = (): SWRResponse<boolean, Error> => {
       if (cache.get(key) == null) {
         mutate(key, !mql.matches);
       }
+
+      return () => {
+        cleanupBreakpointListener(mql, lgOrAvobeHandler);
+      };
     }
   }, [cache, key, mutate]);
 

packages/ui/src/utils/browser-utils.ts

@@ -1,5 +1,6 @@
 import { Breakpoint } from '../interfaces/breakpoints';
 
+const EVENT_TYPE_CHANGE = 'change';
 
 export const addBreakpointListener = (
     breakpoint: Breakpoint,
@@ -12,7 +13,15 @@ export const addBreakpointListener = (
   const mediaQueryList = window.matchMedia(`(min-width: ${breakpointPixel}px)`);
 
   // add event listener
-  mediaQueryList.addEventListener('change', listener);
+  mediaQueryList.addEventListener(EVENT_TYPE_CHANGE, listener);
 
   return mediaQueryList;
 };
+
+export const cleanupBreakpointListener = (
+    mediaQueryList: MediaQueryList,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    listener: (this: MediaQueryList, ev: MediaQueryListEvent) => any,
+): void => {
+  mediaQueryList.removeEventListener(EVENT_TYPE_CHANGE, listener);
+};