[React] React-Query 상태(Status) & StaleTime, CacheTime 정리

[ 목차 ]
Query 상태 (Status)
StaleTime과 CacheTime 정리

 

Query 상태 (status)

아래 다섯 가지 상태로 정의되어 있습니다.

 

1. fetching

2. fresh

3. stale

4. paused

5. inactive

 

 

 

 

1. fetching

QueryFn을 이용해서 데이터를 요청하는 상태입니다.

 

 

2. fresh

새로운 데이터를 받은 상태입니다.

default로 staleTime이 0으로 정의되어 있는데요.

default일 때는, 순간적으로 fresh 상태로 유지됩니다.

 

 

3. stale

데이터의 상태가 최신이 아님을 뜻하는 상태입니다.

이 상태일 때는 특정 조건 (windowFocus, remount 등...) 이나 백그라운드 상황에서 QueryFn을 통해 새로운 데이터를 가져와 데이터를 업데이트 하곤 합니다.

 

 

4. paused

네트워크에 연결되어 있지 않은 상태입니다.

 

 

5. inactive

Query를 observing하지 않는 상태입니다.

Query를 사용하는 컴포넌트나 페이지가 unmount 되었다고 볼 수 있는데요.

cacheTime 만큼만 Query가 캐싱됩니다.

cacheTime (default로 5분)이 지나면, garbage collected되어 캐시에서 제거합니다.

 

 

 

 

** 처음 네트워크 요청을 했을 때 **

상태(status)가 fetching -> fresh -> stale로 변경됨

 

 

 

 

** 다른 페이지로 이동했을 때 **

이전에 참조했던 Query의 상태가 stale -> inactive로 변경됨

 

 

 

 

** 네트워크 연결이 없을 때 **

 

 

 

 

Stale Time과 Cache Time

 

staleTime

Query의 상태가 fresh -> stale 되는 시간(ms)을 의미합니다.

default 값은 0이며, ms단위로 시간을 지정할 수 있습니다. (1,000이면 1초, 30,000이면 5분)

 

staleTime은 데이터를 얼마나 자주(often) 가져올 지를 나타내는 기준값입니다.

staleTime 값이 클수록, Query는 fresh 상태로 오래 유지되어 있기에 새로운 데이터를 업데이트하는 주기가 길어집니다.

 

 

cacheTime

- Query가 inactive 상태일 때 캐시에서 garbage collected 되는 시간(ms)을 의미합니다.

default 값은 5분입니다.

 

 

 

 

 

 

참고

https://tanstack.com/query/latest/docs/react/guides/important-defaults

https://tkdodo.eu/blog/practical-react-query