fix: optimized rerenders caused by useList hooks

src/hooks/lists/useStatusesList.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import { StatusSchema } from "@/lib/client";
 import { getStatusesOptions } from "@/lib/client/@tanstack/react-query.gen";
 
@@ -8,24 +8,27 @@ type Props = {
 };
 
 const useStatusesList = ({ boardId }: Props) => {
+    const queryClient = useQueryClient();
+
     const [statuses, setStatuses] = useState<StatusSchema[]>([]);
 
-    const { data, refetch, isLoading } = useQuery({
-        ...getStatusesOptions({ path: { boardId: boardId! } }),
-        enabled: boardId !== undefined,
-    });
+    const fetchStatuses = () => {
+        if (!boardId) return;
+        queryClient
+            .fetchQuery({
+                ...getStatusesOptions({ path: { boardId } }),
+            })
+            .then(data => {
+                setStatuses(data.statuses);
+            })
+            .catch(err => console.error(err));
+    };
 
     useEffect(() => {
-        if (boardId === undefined) {
-            setStatuses([]);
-            return;
-        }
-        if (data?.statuses) {
-            setStatuses(data.statuses);
-        }
-    }, [data?.statuses, boardId]);
+        fetchStatuses();
+    }, [boardId]);
 
-    return { statuses, setStatuses, refetch, isLoading };
+    return { statuses, setStatuses, refetch: fetchStatuses };
 };
 
 export default useStatusesList;