Configure staleTime and gcTime in Tanstack Router

In this lesson, we learn how to configure staleTime and gcTime in TanStack Router to manage data caching and freshness.

The staleTime parameter determines how long data is considered fresh before it is refetched in the background, while the gcTime parameter controls how long data is kept in the cache before being removed.

By default, data is considered stale immediately, but we can adjust these times to suit our needs. For example, setting staleTime to 10 seconds (10,000 milliseconds) means that if a user navigates back to a route within that time, the cached data will be used and refetched in the background.

Adjusting gcTime affects how long data remains cached after a route is unloaded. These settings help balance data freshness with performance by minimizing unnecessary network requests.

Share with a coworker

Transcript

[00:00] The stale time and GC time parameters are working very similar in both TANSTACK Router and TANSTACK Query. So here I'm in the home route. Now home route has no loader so there is nothing cached over here. However if I walk into the employees route, then we can see that there is some data that is being cached due to this loader, and we can see that the age of this cache entry is being incremented because it gets slightly older and older. Now, stale time determines the time after which the data becomes stale.

[00:37] Stale means that it's pretty old, but if we need to reach out for this data from the cache, then we are going to display it for the user, but in the meantime we're going to refetch it so that we have the fresh data. The GC time however determines the time duration after which the data is so old that it's better that we remove it entirely. So all in all, let's walk back into the home route again and I'm going to reload this page again so everything is clean and fresh. Now if we walk into the employees, we can see that it's 2 seconds, 3 seconds old, 4 seconds old and the stale time is 0 seconds. So this is the default.

[01:23] So by default, when we load any data for a route, it's immediately considered stale. So it basically means that if I walk into the home route and if I walk back into the employees now for a very short period of time we're going to get and use the data from the cache and immediately there was a new reload via HTTP GET request. If we want to modify the stale time or GC time, we can do it using the stale time or GC time parameters. Now, this does not determine the number of seconds but milliseconds. So if we want, let's say to determine that this should be 10 seconds, we need to pass the number 10, 000 over here.

[02:12] So let me just walk back to home. Let's reload the page to make sure everything is updated. And when we walk into employees, we can see that yes, the 10 seconds are over here. So let me just rerun it once again. We're walking into the employees.

[02:28] Now I'm going to go back to home and walk back here, we can see that this entry has not been reloaded. So there was no blue mark that is being fetched. But now if I walk back into the home, Now this is already stale as we can see. Now we will see that it will be reloaded. So for a short period of time we could see that this is blue.

[02:55] Now if we make GC time slightly smaller then we would see that the data entry, the cache entry, would be entirely removed.