React Query staleTime vs cacheTime

gyujae·2022년 8월 30일
0
post-custom-banner

stale data

  • 데이터 리페칭(Refetching)은 만료된 데이터에서만 실행됩니다.

stale time

  • 데이터를 허용하는 최대 나이
  • stale time이 만료될 시 화면을 mount할 시 다시 frech한 데이터를 가져온다.

stale time vs cache time

  • stale time
    - 데이터가 fresh -> stale 상태로 변경되는데 걸리는 시간
    - fresh 상태일때는 쿼리 인스턴스가 새롭게 mount 되어도 네트워크 fetch가 일어나지 않는다.
    - 데이터가 한번 fetch 되고 나서 staleTime이 지나지 않았다면 unmount 후 mount 되어도 fetch가 일어나지 않는다.
  • cache time
    - 데이터가 inactive 상태일 때 캐싱된 상태로 남아있는 시간
    쿼리 인스턴스가 unmount 되면 데이터는 inactive 상태로 변경되며, 캐시는 cacheTime만큼 유지된다.
    - cacheTime이 지나면 가비지 콜렉터로 수집된다.
    - cacheTime이 지나기 전에 쿼리 인스턴스가 다시 마운트 되면, 데이터를 fetch하는 동안 캐시 데이터를 보여준다.
    - cacheTime은 staleTime과 관계없이, 무조건 inactive 된 시점을 기준으로 캐시 데이터 삭제를 결정한다.
    만료된 데이터를 보여주기 싫은 경우 cacheTime을 0으로 설정한다.
post-custom-banner

0개의 댓글