tanstack-query

Install @tanstack/react-query, create a QueryClient with staleTime and gcTime defaults, then wrap your app in QueryClientProvider. Add ReactQueryDevtools inside the provider for debugging; it is tree-shaken in production builds.

Switch all hooks to object syntax like useQuery({ queryKey, queryFn }), replace cacheTime with gcTime, use isPending instead of isLoading, and move query onSuccess callbacks into useEffect. Infinite queries now require an explicit initialPageParam.

In v5, isLoading means isPending AND isFetching, so it behaves differently than v4. Use isPending to detect the initial loading state when no data exists yet.

No, useSuspenseQuery does not accept the enabled option because suspense guarantees data availability. Use conditional rendering of the component instead to control when the query runs.

In onMutate, cancel outgoing queries, snapshot the previous cache with getQueryData, then update it with setQueryData. Roll back in onError using the snapshot and refetch in onSettled via invalidateQueries.

Avoid it for local UI state like modals, which belongs in useState, and for global client state like themes, which fits Context or Zustand better. It is designed for server state, not client-only state.