What is React Query's staleTime vs gcTime (cacheTime) and how do they interact?

React Query uses two separate timers for different parts of the cache lifecycle.

staleTime — how long a query's data is considered "fresh" after it was last fetched. During this window, React Query won't refetch even if the component remounts or the user refocuses the window.

• Default: 0 — data is immediately stale, so React Query refetches on every mount/focus.
• Set to Infinity for data that never changes (static config, user roles).
• Set to 5 * 60 * 1000 (5 min) for data that changes infrequently.

gcTime (formerly cacheTime) — how long an inactive (no subscribers) query result stays in the cache before being garbage-collected.

• Default: 5 * 60 * 1000 (5 min).
• While in cache, navigating back to a page shows the cached data instantly (even if stale) while refetching in the background.

useQuery({
  queryKey: ['user', id],
  queryFn: fetchUser,
  staleTime: 60_000,   // fresh for 1 min — no refetch on focus
  gcTime: 300_000,     // keep in cache 5 min after last subscriber
});

Key interaction: staleTime ≤ gcTime is the natural order. staleTime controls when to refetch; gcTime controls when to forget.