Tanstack Query 캐시데이터의 생명주기

Life Cycle

 

fresh 데이터를 새로 패칭할 필요가 없는 상태입니다. **staleTime**이 지나지 않은 상태로, 캐시 데이터를 그대로 사용할 수 있습니다.
stale 데이터를 새로 패칭해야 하는 상태입니다. **staleTime**이 지난 후로, 새로운 데이터를 가져오기 위해 쿼리가 실행됩니다.
기본 staleTime 은 0으로 설정돼있음! (바로 stale 상태가 됨)
active 현재 컴포넌트에서 사용 중인 쿼리 상태입니다. 컴포넌트가 마운트되어 쿼리를 사용하고 있을 때를 말합니다.
inactive 더 이상 사용되지 않는 쿼리 상태입니다. 컴포넌트가 언마운트되거나 쿼리가 더 이상 필요하지 않을 때를 말합니다.
deleted 캐시에서 제거된 쿼리 상태입니다. gcTime(cache Time) 이 지나면 쿼리가 캐시에서 삭제되어 이 상태가 됩니다.
fetching 데이터를 서버에서 가져오고 있는 상태입니다. 이 상태에서는 **isFetching**이 true로 설정됩니다.

 

queryClient 초기화, useQuery 사용시 staleTime 같은 옵션을 설정할 수 있다

 

 

'React' 카테고리의 다른 글

UX 향상 기법 - Throttling & Debouncing, lodash  (1) 2024.09.06
[React] Zustand  (0) 2024.09.06
TanStack Query  (0) 2024.09.05
[React] 비동기 작업, HTTP  (0) 2024.09.05
[React/supabase] 변경된 column만 업데이트하기  (0) 2024.09.03