From feafffe53ebd4b537768b8a6ac5ca3f79ad97d22 Mon Sep 17 00:00:00 2001 From: Nathaniel Tampus Date: Mon, 6 Mar 2023 22:01:39 +0800 Subject: [PATCH] remove theme event listener on cleanup --- client/src/components/ThemeToggle.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/client/src/components/ThemeToggle.tsx b/client/src/components/ThemeToggle.tsx index 8942f52..6982f14 100644 --- a/client/src/components/ThemeToggle.tsx +++ b/client/src/components/ThemeToggle.tsx @@ -7,11 +7,15 @@ export default function ThemeToggle() { const [darkTheme, setDarkTheme] = useState(false); useEffect(() => { - window - .matchMedia("(prefers-color-scheme: dark)") - .addEventListener("change", (e) => changeTheme(e.matches ? "dark" : "light")); + const onChange = (e: MediaQueryListEvent) => changeTheme(e.matches ? "dark" : "light"); + + window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", onChange); changeTheme(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"); + + return () => { + window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", onChange); + }; }, []); function changeTheme(theme: "dark" | "light") {