[React Query] StaleTime & CacheTime

개요

계속 헷갈리는 staleTime과 cacheTime을 정리하는 포스팅

staleTime

• 데이터가 신선한 상태( fresh )로 남아있는 시간을 뜻함 ( fresh → stale 되는 시간(ms))
• default 값은 0이며, ms단위로 시간을 지정할 수 있음
• fresh한 데이터일 때는 쿼리 인스턴스가 새롭게 mount되어도 네트워크 fetch가 일어나지 않는다. ( API 호출 없이 캐싱된 데이터가 다시 사용됨 )
• stale한 데이터 일때는 focus, mount, 네트워크가 다시 연결되었을 때 등 신선한 데이터를 다시 fetch해온다.

cacheTime

• 데이터가 inactive 상태일 때 캐싱된 상태로 남아있는 시간
• default 값은 300000(ms)이며, 5분이다
• 쿼리 인스턴스가 unmount 되면 데이터는 inactive 상태로 변경되며, 캐시는 cacehTime 만큼 유지
• cacheTime이 지나면 가비지 콜렉터로 수집된다
• inactive된 데이터는 캐시에서 삭제

staleTime vs cacheTime

• 쿼리 인스턴스가 마운트 되는 순간에는 staleTime이 시작
• 쿼리 인스턴스가 완전히 언마운트되어서 inactive상태가 되면 cacheTime이 시작
• 마운트되고 staleTime이 끝나면 stale상태를 가지고 있지만 cacheTime이 시작되지는 않는다. ( 화면에 아직 유효한 데이터가 존재하기 때문에 cacheTime이 흐르지 않음 )
• 언마운트 되고 화면이 사라지고 inactive가 되면 cacheTime 시작. 이때 cacheTime이 유효하기 때문에 다시 호출하면 캐싱된 데이터를 재사용할 수 있다

💡 staleTime은 refeching할때의 고려사항이고 cacheTime은 다시 사용할 수도 있는 데이터 용도