when the values in the cache become invalidated and resync with the server state, the default configuration for most caches. cache-Control: public, max-age:60,s-maxage=60 This header instructs the browser not to make any further requests in the same URL within the next 60 seconds instead, it serves from the browser cache.

the problem we see is that React Query does not make requests, and it doesn't know about cache control headers. In React Query, there is a similar concept, which is staleTime.

The default staleTime is 0.

How does React Query know when to refetch data?

1. When the queryKey changes.
2. A new observer mounts: observers are created by useQuery, every time a new component mounts. if the query is stale, refetch the data and update the cache.
3. the window receives a focus event.
4. the device goes online.

refetchOnMount: false refetchOnWindowFocus: false refetchOnReconnect: false

1. Queries are instantly considered stale by default.
2. Queries will always return data from the cache even it is not fresh.
3. Triggers will cause stale queries to be refetched
4. Think about the staleTime for each resource.

Garbage collection: A form of memory management where memory that has been allocated by a program will be automatically released after it is no longer i use. gcTime: 5

Will react query remove data from the cache after 5 minutes? No, as long as data is being actively used, it's not allowed to undergo Garbage collection.