[React Query] 캐싱 / useQuery의 생명주기

 

react query를 통해 관리하는 쿼리 데이터는 다음과 같은 다섯가지 상태를 가진다.

devtools를 통해 본 쿼리의 상태

fresh | 초록색

새로 추가된 쿼리이다. staleTime이 설정되어있다면 설정된 시간만큼 fresh 상태로 유지된다. staleTime이 설정이 안되어있다면 기본값이 0이기 때문에 fresh 직후에 stale 상태로 전환된다.
fresh 상태일 때는 mount, update 시에 데이터를 재요청하지 않는다.

fetching | 파란색

요청 상태인 쿼리이다. mount, update 시에 코드에 해당하는 데이터가 fetch 또는 refetch 된다.

stale | 노란색

데이터가 fetching이 완료되어 만료됐다고 판단하는 쿼리이다. stale 상태인 쿼리를 재호출하면 캐싱된 데이터가 반환되기 때문에 새로운 값이 필요하다면 invalidateQueries를 사용해야한다.

inactive | 검정색

비활성 상태로 사용하지 않는 쿼리이다. 지정된 cacheTime(기본값은 5 * 60 * 1000 = 5분)후에 가비지 콜렉터가 캐시에서 제거한다. 캐시타임이 Infinity로 설정하면 가비지 콜렉터는 비활성화된다.

delete

가비지 콜렉터에 의하여 캐시에서 제거된 쿼리이다.