[React-Query v3] staleTime과 cacheTime

staleTime은 데이터가 만료됐다고 판단하기전까지 허용하는 시간이 staleTime입니다.

웹사이트에 표시된 데이터가 10초정도는 그대로여도 괜찮다면 staleTime을 10초로 설정합니다.

 

staleTime setup은 아래처럼 useQuery의 3번째 파라미터에서 설정해주면 됩니다.

참고로 useQuery의 3번째 파라미터가 useQuery의 옵션을 설정합니다. staleTime은 옵션중 하나입니다.

const { data, isError, isLoading } = useQuery("posts", fetchPosts, { staleTime: 10000 }); //10초

 

staleTime과 cacheTime 차이점

staleTime은 refetching할때의 고려사항이고 cacheTime은 다시 사용할 수도 있는 데이터 용입니다.

 

cacheTime에 대해 조금 더 설명을 붙이면,

특정 쿼리에 대한 활성 useQuery가 없는 경우, 해당 데이터는 콜드 스토리지로 이동합니다.

설정한 cacheTime이 지나면 캐시의 데이터가 만료됩니다. cacheTime의 기본값은 5분입니다.

 

cacheTime은 특정 useQuery가 활성화된 시점 부터 관찰합니다.

따라서 관찰한 시간은, 컴포넌트가 특정 쿼리에 대해 useQuery를 사용한 시간이 됩니다.

 

캐시가 만료되면 가비지 컬렉션이 실행되고, 클라이언트는 데이터를 사용할 수 없으며

데이터가 캐시에 있는 동안 fetching할 때 데이터를 사용할 수 있습니다.

 

하지만 이러한 옵션들을 잘못 사용하면 계속해서 데이터가 페이지에 보이지 않는 현상이 일어날 수도 있습니다.

즉 빈 페이지만 보게되는데, 이 점을 고려한다면, 약간 오래된 데이터(이미 받아온 데이터..?)를 조금이나마 화면에 표시하는 것이

빈 페이지만을 보이는 것보다 낫습니다.

 

만약 만료된 데이터가 위험할 수 있는 애플리케이션의 경우 cacheTime을 0으로 설정하면 됩니다.

cacheTime을 0으로 설정하면 항상 최신의 데이터만을 가져오게 됩니다.