diff --git a/src/components/CategoryList.tsx b/src/components/CategoryList.tsx
index 5191fbd5..a2ad3173 100644
--- a/src/components/CategoryList.tsx
+++ b/src/components/CategoryList.tsx
@@ -1,25 +1,20 @@
+import { useEffect } from "react";
+
 import { useAppContext } from "../contexts/AppContext";
 import { useCategories } from "../hooks/useCategories";
 
-let oldCategories = [] as string[];
-
 const CategoryList = () => {
   const { category, setCategory } = useAppContext();
   const { fetchedCategories, loading, error } = useCategories();
 
+  useEffect(() => {
+    setCategory(fetchedCategories[0]);
+  }, [setCategory, fetchedCategories]);
+
   if (loading) return <div>Loading...</div>;
 
   if (error) return <div>Error occured: {error}</div>;
 
-  // NOTE: set the first element as selected
-  // switching between categories
-  // Just a temporary solution.
-  // If you've better solution, I would appreciate it :)
-  if (oldCategories !== fetchedCategories) {
-    setCategory(fetchedCategories[0]);
-    oldCategories = fetchedCategories;
-  }
-
   return (
     <ul role="list" className="categories">
       {fetchedCategories.map((name, idx) => (