-
Notifications
You must be signed in to change notification settings - Fork 3.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
perf: Use query instead of queries to reduce rerenders initially (#10899
) <!-- Before opening a pull request, please read the [contributing guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md) first --> <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on refactoring multiple hooks in the codebase to replace `useQueries` with `useQuery`, simplifying the data fetching logic and improving error handling across various components. ### Detailed summary - Replaced `useQueries` with `useQuery` in several hooks. - Streamlined query functions to use `Promise.all` for concurrent fetching. - Enhanced error handling with `console.error` in query functions. - Updated query keys to utilize `join` for better string formatting. - Simplified memoization of results using `useMemo`. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
- Loading branch information
Showing
5 changed files
with
322 additions
and
266 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
68 changes: 37 additions & 31 deletions
68
apps/web/src/state/farmsV4/state/accountPositions/hooks/useAccountStableLpDetails.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,49 @@ | ||
| import { LegacyRouter } from '@pancakeswap/smart-router/legacy-router' | ||
| import { useQueries, UseQueryOptions, UseQueryResult } from '@tanstack/react-query' | ||
| import { useQuery } from '@tanstack/react-query' | ||
| import { SLOW_INTERVAL } from 'config/constants' | ||
| import { useCallback, useMemo } from 'react' | ||
| import { Address } from 'viem' | ||
| import { useMemo } from 'react' | ||
| import { getStablePairDetails } from '../fetcher' | ||
| import { StableLPDetail } from '../type' | ||
| import { useLatestTxReceipt } from './useLatestTxReceipt' | ||
|
|
||
| export const useAccountStableLpDetails = (chainIds: number[], account?: Address | null) => { | ||
| const [latestTxReceipt] = useLatestTxReceipt() | ||
| const queries = useMemo(() => { | ||
| return chainIds.map((chainId) => { | ||
| const stablePairs = LegacyRouter.stableSwapPairsByChainId[chainId] | ||
| return { | ||
| queryKey: ['accountStableLpBalance', account, chainId, latestTxReceipt?.blockHash], | ||
| // @todo @ChefJerry add signal | ||
| queryFn: () => getStablePairDetails(chainId, account!, stablePairs), | ||
| enabled: !!account && stablePairs && stablePairs.length > 0, | ||
| select(data) { | ||
| return data.filter((d) => d.nativeBalance.greaterThan('0') || d.farmingBalance.greaterThan('0')) | ||
| }, | ||
| refetchOnMount: false, | ||
| refetchOnWindowFocus: false, | ||
| refetchOnReconnect: false, | ||
| refetchInterval: SLOW_INTERVAL, | ||
| // Prevents re-fetching while the data is still fresh | ||
| staleTime: SLOW_INTERVAL, | ||
| } satisfies UseQueryOptions<StableLPDetail[]> | ||
| }) | ||
| }, [account, chainIds, latestTxReceipt?.blockHash]) | ||
|
|
||
| const combine = useCallback((results: UseQueryResult<StableLPDetail[], Error>[]) => { | ||
| return { | ||
| data: results.reduce((acc, result) => acc.concat(result.data ?? []), [] as StableLPDetail[]), | ||
| pending: results.some((result) => result.isPending), | ||
| } | ||
| }, []) | ||
| return useQueries({ | ||
| queries, | ||
| combine, | ||
| const { data, isPending } = useQuery<StableLPDetail[], Error>({ | ||
| queryKey: ['accountStableLpBalance', account, chainIds.join(','), latestTxReceipt?.blockHash], | ||
| // @todo @ChefJerry add signal | ||
| queryFn: async () => { | ||
| if (!account) return [] | ||
| const results = await Promise.all( | ||
| chainIds.map(async (chainId) => { | ||
| const stablePairs = LegacyRouter.stableSwapPairsByChainId[chainId] | ||
| if (!stablePairs || stablePairs.length === 0) return [] | ||
| try { | ||
| const details = await getStablePairDetails(chainId, account, stablePairs) | ||
| return details.filter((d) => d.nativeBalance.greaterThan('0') || d.farmingBalance.greaterThan('0')) | ||
| } catch (error) { | ||
| console.error(`Error fetching details for chainId ${chainId}:`, error) | ||
| return [] | ||
| } | ||
| }), | ||
| ) | ||
| return results.flat() | ||
| }, | ||
| enabled: !!account, | ||
| refetchOnMount: false, | ||
| refetchOnWindowFocus: false, | ||
| refetchOnReconnect: false, | ||
| refetchInterval: SLOW_INTERVAL, | ||
| // Prevents re-fetching while the data is still fresh | ||
| staleTime: SLOW_INTERVAL, | ||
| }) | ||
|
|
||
| return useMemo( | ||
| () => ({ | ||
| data: data ?? [], | ||
| pending: isPending, | ||
| }), | ||
| [data, isPending], | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
63 changes: 36 additions & 27 deletions
63
apps/web/src/state/farmsV4/state/accountPositions/hooks/useAccountV3Positions.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,47 @@ | ||
| import { useQueries, UseQueryOptions, UseQueryResult } from '@tanstack/react-query' | ||
| import { useQuery } from '@tanstack/react-query' | ||
| import { SLOW_INTERVAL } from 'config/constants' | ||
| import { useCallback, useMemo } from 'react' | ||
| import { useMemo } from 'react' | ||
| import { Address } from 'viem' | ||
| import { getAccountV3Positions } from '../fetcher/v3' | ||
| import { PositionDetail } from '../type' | ||
| import { useLatestTxReceipt } from './useLatestTxReceipt' | ||
|
|
||
| export const useAccountV3Positions = (chainIds: number[], account?: Address | null) => { | ||
| const [latestTxReceipt] = useLatestTxReceipt() | ||
| const queries = useMemo(() => { | ||
| return chainIds.map((chainId) => { | ||
| return { | ||
| queryKey: ['accountV3Positions', account, chainId, latestTxReceipt?.blockHash], | ||
| // @todo @ChefJerry add signal | ||
| queryFn: () => getAccountV3Positions(chainId, account!), | ||
| enabled: !!account && !!chainId, | ||
| refetchOnMount: false, | ||
| refetchOnWindowFocus: false, | ||
| refetchOnReconnect: false, | ||
| refetchInterval: SLOW_INTERVAL, | ||
| // Prevents re-fetching while the data is still fresh | ||
| staleTime: SLOW_INTERVAL, | ||
| } satisfies UseQueryOptions<PositionDetail[]> | ||
| }) | ||
| }, [account, chainIds, latestTxReceipt?.blockHash]) | ||
|
|
||
| const combine = useCallback((results: UseQueryResult<PositionDetail[], Error>[]) => { | ||
| return { | ||
| data: results.reduce((acc, result) => acc.concat(result.data ?? []), [] as PositionDetail[]), | ||
| pending: results.some((result) => result.isPending), | ||
| } | ||
| }, []) | ||
| return useQueries({ | ||
| queries, | ||
| combine, | ||
| const { data, isPending } = useQuery<PositionDetail[], Error>({ | ||
| queryKey: ['accountV3Positions', account, chainIds.join('-'), latestTxReceipt?.blockHash], | ||
| // @todo @ChefJerry add signal | ||
| queryFn: async () => { | ||
| if (!account) return [] | ||
| const results = await Promise.all( | ||
| chainIds.map(async (chainId) => { | ||
| try { | ||
| const positions = await getAccountV3Positions(chainId, account) | ||
| return positions ?? [] | ||
| } catch (error) { | ||
| console.error(`Error fetching V3 positions for chainId ${chainId}:`, error) | ||
| return [] | ||
| } | ||
| }), | ||
| ) | ||
| return results.flat() | ||
| }, | ||
| enabled: !!account, | ||
| refetchOnMount: false, | ||
| refetchOnWindowFocus: false, | ||
| refetchOnReconnect: false, | ||
| refetchInterval: SLOW_INTERVAL, | ||
| // Prevents re-fetching while the data is still fresh | ||
| staleTime: SLOW_INTERVAL, | ||
| }) | ||
|
|
||
| // Memoize the result object | ||
| return useMemo( | ||
| () => ({ | ||
| data: data ?? [], | ||
| pending: isPending, | ||
| }), | ||
| [data, isPending], | ||
| ) | ||
| } |
Oops, something went wrong.