react-query의 쿼리에서 사용할 수 있는 option들 중에 staleTime과 gcTime의 차이에 대해서 알아보자.

staleTime과 gcTime에 대한 설명은 다음과 같다.

staleTime

number | Infinity (optional)

• default: 0 → 데이터가 늘 stale하다고 가정
• staleTime: infinity 인 경우 데이터는 절대 stale하다고 인식되지 않음
• 데이터가 오래된 것으로 간주되는 시간을 밀리초 단위로 나타내며, 이 값은 정의된 훅에만 적용됨

• 오래된 데이터를 얼마나 용인할지에 대한 값

  • max-age 의 의미
• 데이터가 만료되었고 refetch할 준비가 된 상태를 말함

• 여전히 캐시에 있으며 다시 검증되어야 한다

  • Stale while revalidating : 새로운 데이터를 불러오기 전까지 stale한 데이터를 보여주며, 캐시에 없을 땐 보여주지 못함

• stale data에만 refetch가 트리거됨

  • 윈도우가 refocus되는 경우

gcTime

number | Infinity (optional)

• default: 5*60*1000(5 min) 또는 SSR 중에는 Infinity
• maximum: 24 days
• Infinity 인 경우에는 가비지 콜렉션이 비활성화됨
• 미사용/비활성화된 캐시 데이터가 메모리에 유지되는 시간을 밀리초 단위로 나타냄
• 쿼리의 캐시가 사용되지 않거나 비활성화될 때, 해당 캐시 데이터는 이 기간 이후에 가비지 수집됨
• 서로 다른 가비지 수집 시간이 지정된 경우, 가장 긴 시간이 사용됨

v5에서의 변화: cacheTime → gcTime

• v5 이전에는 cacheTime 으로 사용했지만 v5에서 gcTime 으로 네이밍이 변경됨
• 기존의 cacheTime 은 이름 때문에 많은 사람들이 “데이터가 캐시되어있는 시간”으로 잘못 아는 경우가 많았음
• cacheTime 은 쿼리가 사용 중일 때는 아무것도 하지 않음
• gc 는 “garbage collect” 시간을 의미함

const MINUTE = 1000 * 60;

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
// -      cacheTime: 10 * MINUTE,
      gcTime: 10 * MINUTE,
    },
  },
})

결론

• staleTime과 gcTime의 차이를 요약하면 다음과 같다.

  staleTime : 데이터를 다시 가져와야 할 때까지의 시간

  gcTime : 미사용 중인 데이터가 캐시에 유지될 시간

참고 문서

https://tanstack.com/query/latest/docs/framework/react/reference/useQuery https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#rename-cachetime-to-gctime