react-data-fetching

Use a data fetching library like TanStack Query with the useQuery hook, which handles caching, deduplication, retries, and loading states automatically. Pass a queryKey and queryFn instead of managing fetch calls inside useEffect.

TanStack Query offers more features including suspense queries, devtools, infinite queries, optimistic mutations, and offline support, making it the stronger choice for Vite apps. SWR is a lighter alternative covering deduplication, caching, and revalidation basics.

Hoist child queries to the same level as the parent so both fetch in parallel, or use Promise.all for independent async calls. Route-level loaders can also fetch all required data before the component renders.

Yes, TanStack Query provides useSuspenseQuery, which integrates with Suspense boundaries so loading states are declared in the component tree instead of managed per component. SWR offers an equivalent suspense option.

Use useMutation with onMutate to cancel in-flight queries, snapshot the previous cache value, and setQueryData with the predicted result. Roll back in onError using the snapshot and invalidate the query in onSettled.

Use React.cache in React Server Components to deduplicate identical async calls within a single server render, such as getSession called by multiple components. Pass primitive arguments like strings, since inline objects create new references and cause cache misses.