Out of the box, React Query is configured with aggressive but sane defaults. Sometimes these defaults can catch new users off guard or make learning/debugging difficult if they are unknown by the user. Keep them in mind as you continue to learn and use React Query:
useQuery
or useInfiniteQuery
by default consider cached data as stale.To change this behavior, you can configure your queries both globally and per-query using the
staleTime
option. Specifying a longerstaleTime
means queries will not refetch their data as often
If you see a refetch that you are not expecting, it is likely because you just focused the window and React Query is doing a refetchOnWindowFocus
. During development, this will probably be triggered more frequently, especially because focusing between the Browser DevTools and your app will also cause a fetch, so be aware of that.
To change this functionality, you can use options like
refetchOnMount
,refetchOnWindowFocus
,refetchOnReconnect
andrefetchInterval
.
useQuery
, useInfiniteQuery
or query observers are labeled as "inactive" and remain in the cache in case they are used again at a later time.To change this, you can alter the default
cacheTime
for queries to something other than1000 * 60 * 5
milliseconds.
To change this, you can alter the default
retry
andretryDelay
options for queries to something other than3
and the default exponential backoff function.
Structural sharing only works with JSON-compatible values, any other value types will always be considered as changed. If you are seeing performance issues because of large responses for example, you can disable this feature with the
config.structuralSharing
flag. If you are dealing with non-JSON compatible values in your query responses and still want to detect if data has changed or not, you can define a data compare function withconfig.isDataEqual
.
The latest TanStack news, articles, and resources, sent to your inbox.