Background Refetch and Stale Time Configuration
Configure staleTime and cacheTime per query, enable refetchOnReconnect so data syncs when the device comes back online, and implement a network status banner.
What Is Stale Data?
In React Query, data is considered stale when it is older than the configured staleTime. Stale data is not wrong — it's just potentially out of date. React Query displays stale data immediately from cache (no loading spinner) while scheduling a background refetch to get fresh data.
This stale-while-revalidate pattern is the key to why React Query feels so fast: users always see data immediately, and it silently updates in the background when needed. Understanding staleTime is essential to configuring this behavior correctly.
staleTime: How Long Data Is Fresh
staleTime is the number of milliseconds that cached data is considered fresh. During this window, React Query serves the cache without any network request — not even a background refetch. After staleTime expires, the data is still in the cache but considered stale, and a background refetch will happen next time it's needed.
The default staleTime is 0 — data is immediately stale after it's fetched! This means every component mount triggers a background refetch. Increasing staleTime dramatically reduces network traffic for data that doesn't change often.
// Default: staleTime = 0 (immediately stale)
const { data } = useQuery({
queryKey: ['user'],
queryFn: fetchUser,
// Every mount triggers a background refetch!
});
// Better: give fresh data a 5-minute window
const { data } = useQuery({
queryKey: ['user'],
queryFn: fetchUser,
staleTime: 5 * 60 * 1000, // 5 minutes
// No refetch for 5 minutes after last fetch
});All lessons in this course
- QueryClient, QueryClientProvider, and useQuery
- Mutations with useMutation and Cache Invalidation
- Persisting the Query Cache with AsyncStorage
- Background Refetch and Stale Time Configuration