From 0da847872a18cfa06eee84799c982aca17c70cf9 Mon Sep 17 00:00:00 2001
From: Saminjay Goel <32176560+saminjay@users.noreply.github.com>
Date: Mon, 30 Dec 2024 09:04:44 +0530
Subject: [PATCH 1/2] fix category

---
 src/components/CategoryList.tsx | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/components/CategoryList.tsx b/src/components/CategoryList.tsx
index 5191fbd5..1cc4d5ab 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]);
+  }, [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) => (

From 35f6e65c2c3e11fed002934f4283bf4d132c1463 Mon Sep 17 00:00:00 2001
From: Saminjay Goel <32176560+saminjay@users.noreply.github.com>
Date: Mon, 30 Dec 2024 09:42:50 +0530
Subject: [PATCH 2/2] added setCategory dependency

---
 src/components/CategoryList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CategoryList.tsx b/src/components/CategoryList.tsx
index 1cc4d5ab..a2ad3173 100644
--- a/src/components/CategoryList.tsx
+++ b/src/components/CategoryList.tsx
@@ -9,7 +9,7 @@ const CategoryList = () => {
 
   useEffect(() => {
     setCategory(fetchedCategories[0]);
-  }, [fetchedCategories]);
+  }, [setCategory, fetchedCategories]);
 
   if (loading) return <div>Loading...</div>;