fix: optimized rerenders caused by useList hooks

src/hooks/lists/useDealsList.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import { DealSchema } from "@/lib/client";
 import { getDealsOptions } from "@/lib/client/@tanstack/react-query.gen";
 
@@ -10,22 +10,27 @@ type Props = {
 const useDealsList = ({ boardId }: Props) => {
     const [deals, setDeals] = useState<DealSchema[]>([]);
 
-    const { data, refetch, isLoading } = useQuery({
-        ...getDealsOptions({ path: { boardId: boardId! } }),
-        enabled: boardId !== undefined,
-    });
+    const queryClient = useQueryClient();
+
+    const fetchDeals = () => {
+        if (!boardId) return;
+        queryClient
+            .fetchQuery({
+                ...getDealsOptions({ path: { boardId } }),
+            })
+            .then(data => {
+                setDeals(data.deals);
+            })
+            .catch(err => {
+                console.error(err);
+            });
+    };
 
     useEffect(() => {
-        if (boardId === undefined) {
-            setDeals([]);
-            return;
-        }
-        if (data?.deals) {
-            setDeals(data.deals);
-        }
-    }, [data?.deals, boardId]);
+        fetchDeals();
+    }, [boardId]);
 
-    return { deals, setDeals, refetch, isLoading };
+    return { deals, setDeals, refetch: fetchDeals };
 };
 
 export default useDealsList;