Optimize the code for better speed

src/components/CategoryList.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useMemo } from "react";
 
 import { useAppContext } from "@contexts/AppContext";
 import { useCategories } from "@hooks/useCategories";
@@ -7,17 +7,15 @@ const CategoryList = () => {
   const { category, setCategory } = useAppContext();
   const { fetchedCategories, loading, error } = useCategories();
 
-  useEffect(() => {
-    setCategory(fetchedCategories[0]);
-  }, [setCategory, fetchedCategories]);
+  const memoizedCategories = useMemo(() => fetchedCategories, [fetchedCategories]);
 
   if (loading) return <div>Loading...</div>;
 
   if (error) return <div>Error occurred: {error}</div>;
 
   return (
     <ul role="list" className="categories">
-      {fetchedCategories.map((name, idx) => (
+      {memoizedCategories.map((name, idx) => (
         <li key={idx} className="category">
           <button
             className={`category__btn ${

src/components/CodePreview.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import {
   oneDark,
@@ -13,25 +13,27 @@ type Props = {
 };
 
 const CodePreview = ({ language = "markdown", code }: Props) => {
-  const [theme, setTheme] = useState<"dark" | "light">("dark");
-
-  useEffect(() => {
-    const handleThemeChange = () => {
-      const newTheme = document.documentElement.getAttribute("data-theme") as
-        | "dark"
-        | "light";
-      setTheme(newTheme || "dark");
-    };
+  const [theme, setTheme] = useState<"dark" | "light">(
+    (document.documentElement.getAttribute("data-theme") as "dark" | "light") ||
+      "dark"
+  );
 
-    handleThemeChange();
-    const observer = new MutationObserver(handleThemeChange);
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["data-theme"],
+  const handleThemeChange = (mutations: MutationRecord[]) => {
+    mutations.forEach((mutation) => {
+      if (mutation.attributeName === "data-theme") {
+        const newTheme = document.documentElement.getAttribute(
+          "data-theme"
+        ) as "dark" | "light";
+        setTheme(newTheme || "dark");
+      }
     });
+  };
 
-    return () => observer.disconnect();
-  }, []);
+  const observer = new MutationObserver(handleThemeChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme"],
+  });
 
   return (
     <div className="code-preview">

src/hooks/useEscapeKey.ts

@@ -1,14 +1,16 @@
 import { useEffect } from "react";
 
+const handleEscape = (event: { key: string }, onEscapeEvent: () => void) => {
+  if (event.key === "Escape") onEscapeEvent();
+};
+
 export const useEscapeKey = (onEscapeEvent: () => void) => {
   useEffect(() => {
-    const handleEscape = (event: { key: string }) => {
-      if (event.key === "Escape") onEscapeEvent();
-    };
-    window.addEventListener("keydown", handleEscape);
+    const handleEscapeEvent = (event: { key: string }) => handleEscape(event, onEscapeEvent);
+    window.addEventListener("keydown", handleEscapeEvent);
 
     return () => {
-      window.removeEventListener("keydown", handleEscape);
+      window.removeEventListener("keydown", handleEscapeEvent);
     };
   }, [onEscapeEvent]);
 };

src/hooks/useKeyboardNavigation.ts

@@ -40,14 +40,12 @@ export const useKeyboardNavigation = ({
     if (Object.values(keyboardEventKeys).includes(key)) {
       event.preventDefault();
 
-      switch (key) {
-        case "ArrowDown":
-          setFocusedIndex((prev) => (prev < items.length - 1 ? prev + 1 : 0));
-          break;
-        case "ArrowUp":
-          setFocusedIndex((prev) => (prev > 0 ? prev - 1 : items.length - 1));
-          break;
-        case "ArrowRight":
+      const actions: Record<KeyboardEventKeys, () => void> = {
+        ArrowDown: () =>
+          setFocusedIndex((prev) => (prev < items.length - 1 ? prev + 1 : 0)),
+        ArrowUp: () =>
+          setFocusedIndex((prev) => (prev > 0 ? prev - 1 : items.length - 1)),
+        ArrowRight: () => {
           if (focusedIndex >= 0) {
             const selectedItem = items.filter(
               (item) =>
@@ -59,8 +57,8 @@ export const useKeyboardNavigation = ({
               toggleDropdown(selectedItem);
             }
           }
-          break;
-        case "Enter":
+        },
+        Enter: () => {
           if (focusedIndex >= 0) {
             onSelect(
               items.filter(
@@ -70,11 +68,11 @@ export const useKeyboardNavigation = ({
               )[focusedIndex]
             );
           }
-          break;
-        case "Escape":
-          onClose();
-          break;
-      }
+        },
+        Escape: onClose,
+      };
+
+      actions[key]();
     }
   };
 

src/hooks/useSnippets.ts

@@ -3,16 +3,17 @@ import { CategoryType } from "@types";
 import { slugify } from "@utils/slugify";
 
 import { useFetch } from "./useFetch";
+import { useMemo } from "react";
 
 export const useSnippets = () => {
   const { language, category } = useAppContext();
   const { data, loading, error } = useFetch<CategoryType[]>(
     `/consolidated/${language.mainLanguage ? `${slugify(language.mainLanguage.name)}--${slugify(language.name)}` : slugify(language.name)}.json`
   );
 
-  const fetchedSnippets = data
-    ? data.find((item) => item.name === category)?.snippets
-    : [];
+  const fetchedSnippets = useMemo(() => {
+    return data ? data.find((item) => item.name === category)?.snippets : [];
+  }, [data, category]);
 
   return { fetchedSnippets, loading, error };
 };