fix(useColorModes): clean up the matchMedia listener

packages/coreui-react/src/hooks/__tests__/useColorModes.spec.tsx

@@ -0,0 +1,54 @@
+import { renderHook } from '@testing-library/react'
+import { useColorModes } from '../useColorModes'
+
+const setupEnv = () => {
+  const addEventListener = vi.fn()
+  const removeEventListener = vi.fn()
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn().mockReturnValue({ matches: false, addEventListener, removeEventListener })
+  )
+  const store: Record<string, string> = {}
+  vi.stubGlobal('localStorage', {
+    getItem: (key: string) => (key in store ? store[key] : null),
+    setItem: (key: string, value: string) => {
+      store[key] = String(value)
+    },
+    removeItem: (key: string) => {
+      delete store[key]
+    },
+    clear: () => {
+      for (const key of Object.keys(store)) {
+        delete store[key]
+      }
+    },
+  })
+  return { addEventListener, removeEventListener }
+}
+
+afterEach(() => vi.unstubAllGlobals())
+
+describe('useColorModes', () => {
+  it('removes the matchMedia listener on unmount', () => {
+    const { addEventListener, removeEventListener } = setupEnv()
+
+    const { unmount } = renderHook(() => useColorModes('test-color-scheme'))
+
+    expect(addEventListener).toHaveBeenCalledTimes(1)
+    const handler = addEventListener.mock.calls[0][1]
+
+    unmount()
+
+    expect(removeEventListener).toHaveBeenCalledWith('change', handler)
+  })
+
+  it('does not stack a new listener on every render', () => {
+    const { addEventListener } = setupEnv()
+
+    const { rerender } = renderHook(() => useColorModes('test-color-scheme'))
+    rerender()
+    rerender()
+
+    expect(addEventListener).toHaveBeenCalledTimes(1)
+  })
+})

packages/coreui-react/src/hooks/useColorModes.ts

@@ -51,13 +51,17 @@ export const useColorModes = (
   }, [colorMode])
 
   useEffect(() => {
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const mql = window.matchMedia('(prefers-color-scheme: dark)')
+    const handleChange = () => {
       const storedTheme = getStoredTheme(localStorageItemName)
       if (storedTheme !== 'light' && storedTheme !== 'dark' && colorMode) {
         setTheme(colorMode)
       }
-    })
-  })
+    }
+
+    mql.addEventListener('change', handleChange)
+    return () => mql.removeEventListener('change', handleChange)
+  }, [colorMode, localStorageItemName])
 
   return {
     colorMode,