refactor: memoize toggleTheme function

Author: AliAkrem

web/src/components/top-bar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useMemo, useLayoutEffect, useState } from "react";
+import { useMemo, useLayoutEffect, useState, useCallback } from "react";
 import { useLocation } from "react-router-dom";
 import logoWide from "src/assets/svg/logo-wide.svg";
 import logoSquare from "src/assets/svg/logo-square.svg";
@@ -55,12 +55,12 @@ export function TopBar({ version, links }: TopBarProps): JSX.Element {
     }
   }, []);
 
-  function toggleTheme() {
+  const toggleTheme = useCallback(() => {
     const newTheme = isDark ? "light" : "dark";
     setIsDark(!isDark);
     localStorage.setItem("theme", newTheme);
     document.documentElement.setAttribute("data-theme", newTheme);
-  }
+  }, [isDark]);
 
   return (
     <div className="bg-neutral">
@@ -134,7 +134,9 @@ export function TopBar({ version, links }: TopBarProps): JSX.Element {
               <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
             </svg>
             <input
-              onClick={toggleTheme}
+              onClick={() => {
+                toggleTheme();
+              }}
               id="theme-toggle"
               type="checkbox"
               value="dzcodeLight"