-
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 initial
- Loading branch information
Showing
5 changed files
with
273 additions
and
256 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
63 changes: 32 additions & 31 deletions
63
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,44 @@ | ||
| 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 [] | ||
| const details = await getStablePairDetails(chainId, account, stablePairs) | ||
| return details.filter((d) => d.nativeBalance.greaterThan('0') || d.farmingBalance.greaterThan('0')) | ||
| }), | ||
| ) | ||
| 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
59 changes: 32 additions & 27 deletions
59
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,43 @@ | ||
| 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) => { | ||
| // Fetch the account V3 positions for the current chainId | ||
| const positions = await getAccountV3Positions(chainId, account) | ||
| return positions ?? [] | ||
| }), | ||
| ) | ||
| 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.