React Query의 staleTime과 cacheTime 차이

React Query의 라이프 사이클

• A 쿼리 인스턴스가 mount 됨
• 네트워크에서 데이터 fetch 하고 A라는 query key로 캐싱함
• 이 데이터는 fresh 상태에서 staleTime(기본값 0) 이후 stale 상태로 변경됨
• A 쿼리 인스턴스가 unmount 됨
• 캐시는 cacheTime(기본값 5min) 만큼 유지되다가 가비지 콜렉터로 수집됨
• 만일 cacheTime이 지나기 전에 A 쿼리 인스턴스가 새롭게 mount되면, fetch가 실행되고 fresh한 값을 가져오는 동안 캐시 데이터를 보여줌

 

staleTime과 cacheTime은 React Query의 옵션 중 일부입니다. 이들은 데이터 캐싱 및 재요청에 관련된 동작을 제어하는 데 사용됩니다.

staleTime

• 데이터가 fresh -> stale 상태로 변경되는데 걸리는 시간
• fresh 상태일때는 쿼리 인스턴스가 새롭게 mount 되어도 네트워크 fetch가 일어나지 않는다.
• 데이터가 한번 fetch 되고 나서 staleTime이 지나지 않았다면 unmount 후 mount 되어도 fetch가 일어나지 않는다.
• 즉, staleTime은 데이터가 "stale" 상태로 간주되는 시간을 설정합니다. "stale" 상태는 데이터가 캐시에 있는 동안 유효한 상태이지만, 해당 시간이 지나면 다시 서버에 요청하여 최신 데이터를 가져옵니다. 예를 들어, staleTime을 1000으로 설정하면 데이터가 1초 이상 캐시에 있는 경우에만 재요청이 이루어집니다. 기본값은 0으로 설정되어 데이터가 캐시에 있는 동안에도 매 요청마다 서버에 요청을 보냅니다.
  
  

cacheTime

• 데이터가 inactive 상태일 때 캐싱된 상태로 남아있는 시간
• 쿼리 인스턴스가 unmount 되면 데이터는 inactive 상태로 변경되며, 캐시는 cacheTime만큼 유지된다.
• cacheTime이 지나면 가비지 콜렉터로 수집된다.
• cacheTime이 지나기 전에 쿼리 인스턴스가 다시 마운트 되면, 데이터를 fetch하는 동안 캐시 데이터를 보여준다.
• cacheTime은 staleTime과 관계없이, 무조건 inactive 된 시점을 기준으로 캐시 데이터 삭제를 결정한다.
• 즉,  cacheTime은 캐시에 유지되는 데이터의 유효 시간을 설정합니다. 캐시에 저장된 데이터가 cacheTime 이후에는 자동으로 폐기되며, 이후에 해당 데이터에 대한 요청이 발생하면 다시 서버에 요청하여 데이터를 가져옵니다. 예를 들어, cacheTime을 6000으로 설정하면 데이터가 6초 이상 캐시에 있는 경우에는 폐기되고 다음 요청에 의해 서버에서 새로운 데이터를 가져옵니다. 기본값은 Infinity로 설정되어 데이터가 캐시에 영구히 유지됩니다.

 

https://velog.io/@yrnana/React-Query%EC%97%90%EC%84%9C-staleTime%EA%B3%BC-cacheTime%EC%9D%98-%EC%B0%A8%EC%9D%B4