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
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.