What is React Query stale time?

Stale time (staleTime) is the duration data is considered fresh after being fetched. During this window React Query won't refetch the data automatically. Once stale time expires, the data is marked stale and may be refetched on the next trigger (window focus, component mount, etc.).

What is React Query gcTime (cache time)?

gcTime (formerly cacheTime) controls how long inactive (unused) query data stays in the cache before being garbage collected. Even after a component unmounts, the cached data remains available for this duration so remounting is instant.

How does React Query garbage collection work?

When a query has no active observers (no mounted components using it), React Query starts a garbage collection timer equal to gcTime. If the query isn't used again before the timer expires, the cached data is permanently removed from memory.

What is the difference between isLoading and isFetching in React Query?

isLoading is true only on the very first fetch when there is no cached data. isFetching is true whenever a network request is in flight, including background refetches. This means isFetching can be true while isLoading is false when stale data is being refreshed behind the scenes.

React Query Demo – Interactive Cache, Stale Time & Garbage Collection Visualizer

React Query Demo – Interactive Cache Visualizer This interactive demo by Hamed Panjeh visualizes React Query (TanStack Query) caching, stale time, gcTime, garbage collection, and background refetching to help developers understand data-fetching lifecycle at a glance. Features: live cache countdown timers, mount/unmount simulation, user data fetching, stale vs fresh indicators, and garbage collection monitoring. How to Use This React Query Demo

Mount Your First User — Click the green "Mount" button on any user's card. React Query makes a real API call and starts a 30-second stale-time countdown.

Mount a Second User — Mount another user while the first is still active. Both run independently with their own data and countdowns.

Unmount and Re-mount While Fresh — Unmount a user, then re-mount within 30 seconds. Data loads instantly from cache—no network request.

Watch Data Become Stale — After 30 seconds the data becomes stale (orange). React Query will refetch on the next trigger.

Show Child Component — Click "Show Child Component" inside a mounted user's card to see cache sharing. Parent and child use the same cached data—observer count increases.

Hide Child Component — Hiding the child reduces the observer count but the cache remains active.

Unmount a User — Click "Unmount" on a user's card. The 60-second garbage-collection countdown begins for that user only.

Re-mount Before GC — Mount the user again before 60 seconds. Cached data appears instantly.

Wait for Garbage Collection — Let the GC timer expire. The cache is permanently removed.

Mount After GC — Mount the user again after GC. A fresh API call is made—completing the full lifecycle.

Visit react-query.dev with JavaScript enabled to explore the full interactive experience.