From e0f86f20184dfc9e907fa5af2893a5a05408359a Mon Sep 17 00:00:00 2001 From: AlexSserb Date: Tue, 26 Aug 2025 10:21:11 +0400 Subject: [PATCH] fix: optimized rerenders caused by useList hooks --- src/hooks/lists/useBoardsList.ts | 31 +++++++++++++++------------- src/hooks/lists/useDealsList.ts | 33 +++++++++++++++++------------- src/hooks/lists/useProjectsList.ts | 26 ++++++++++++----------- src/hooks/lists/useStatusesList.ts | 31 +++++++++++++++------------- 4 files changed, 67 insertions(+), 54 deletions(-) diff --git a/src/hooks/lists/useBoardsList.ts b/src/hooks/lists/useBoardsList.ts index 58d7449..31ea0e9 100644 --- a/src/hooks/lists/useBoardsList.ts +++ b/src/hooks/lists/useBoardsList.ts @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -import { useQuery } from "@tanstack/react-query"; +import { useQueryClient } from "@tanstack/react-query"; import { BoardSchema } from "@/lib/client"; import { getBoardsOptions } from "@/lib/client/@tanstack/react-query.gen"; @@ -8,24 +8,27 @@ type Props = { }; const useBoardsList = ({ projectId }: Props) => { + const queryClient = useQueryClient(); + const [boards, setBoards] = useState([]); - const { data, refetch, isLoading } = useQuery({ - ...getBoardsOptions({ path: { projectId: projectId! } }), - enabled: projectId !== undefined, - }); + const fetchBoards = () => { + if (!projectId) return; + queryClient + .fetchQuery({ + ...getBoardsOptions({ path: { projectId } }), + }) + .then(data => { + setBoards(data.boards); + }) + .catch(err => console.error(err)); + }; useEffect(() => { - if (projectId === undefined) { - setBoards([]); - return; - } - if (data?.boards) { - setBoards(data.boards); - } - }, [data?.boards, projectId]); + fetchBoards(); + }, [projectId]); - return { boards, setBoards, refetch, isLoading }; + return { boards, setBoards, refetch: fetchBoards }; }; export default useBoardsList; diff --git a/src/hooks/lists/useDealsList.ts b/src/hooks/lists/useDealsList.ts index c27c2ed..98d6770 100644 --- a/src/hooks/lists/useDealsList.ts +++ b/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([]); - 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; diff --git a/src/hooks/lists/useProjectsList.ts b/src/hooks/lists/useProjectsList.ts index 6c5fe43..e89eda5 100644 --- a/src/hooks/lists/useProjectsList.ts +++ b/src/hooks/lists/useProjectsList.ts @@ -1,27 +1,29 @@ import { useEffect, useState } from "react"; -import { useQuery } from "@tanstack/react-query"; +import { useQueryClient } from "@tanstack/react-query"; import { ProjectSchema } from "@/lib/client"; import { getProjectsOptions } from "@/lib/client/@tanstack/react-query.gen"; const useProjectsList = () => { - const { refetch, data, isLoading } = useQuery({ - ...getProjectsOptions(), - }); + const queryClient = useQueryClient(); const [projects, setProjects] = useState([]); - const refetchProjects = async () => { - const res = await refetch(); - setProjects(res.data?.projects ?? []); + const fetchProjects = () => { + queryClient + .fetchQuery({ + ...getProjectsOptions(), + }) + .then(data => { + setProjects(data.projects); + }) + .catch(err => console.error(err)); }; useEffect(() => { - if (data?.projects) { - setProjects(data.projects); - } - }, [data?.projects]); + fetchProjects(); + }, []); - return { projects, setProjects, refetch: refetchProjects, isLoading }; + return { projects, setProjects, refetch: fetchProjects }; }; export default useProjectsList; diff --git a/src/hooks/lists/useStatusesList.ts b/src/hooks/lists/useStatusesList.ts index e94439c..c4d1e50 100644 --- a/src/hooks/lists/useStatusesList.ts +++ b/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([]); - 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;