[react-query] fresh 상태와 stale 상태의 차이

react-query 에서 데이터의 상태에 관하여 이전에 문서에 적혀있는 데이터가 리페칭 되는 경우(refetchOnWindowFocus)를 보자

 

• Stale queries are refetched automatically in the background when:
  
  • 쿼리 마운트의 새 인스턴스
  • 창이 다시 초점을 맞춥니다.
  • 네트워크가 다시 연결됩니다.
  • The query is optionally configured with a refetch interval.(인터벌 옵션설정시)

 

위 4가지 경우에 내부적으로 리페치과정이 진행된다.

refetchOnWindowFocus 에 의해서 데이터가 리페치되는 경우 이러한 과정은 로딩과정 없이 진행된다. 또한 리페치 에 의한 데이터가 캐시된 데이터가 다르지 않다면 해당 컴포넌트의 리렌더도 발생하지 않는다.

 

즉 불필요한 로드인 경우 사용자 입장에서는 리페치과정에 대한 인지역시 일어나지 않아 사용자경험을 높여준다. 일종의 fetch하고 비교하는 과정을 뒤에서 감춰서하는 prefetching 기능이다.

 

react-query 의 라이프 사이클과 상태

 

1. fetching : 요청 상태인 쿼리. 대기중

2. fresh : 새롭게 추가된 쿼리 인스턴스이며, 만료되지 않은 쿼리. 컴포넌트의 mount, update 시에 데이터를 재요청하지 않음(항상 캐시된 데이터를 가져옴)

3. stale : 데이터 패칭이 완료되어 만료된 쿼리. stale 상태의 같은 쿼리를 useQuery로 재호출하여 컴포넌트 마운트를 한다면 캐싱된 데이터가 반환됨.

4. inactive : 비활성 쿼리로써 사용하지 않음. 5분 뒤에 가비지 콜렉터가 캐시에서 제거함.

5. delete : 가비지 콜렉터에 의하여 캐시에서 제거된 쿼리.

 

의문점

? fresh 와 stale 상태의 차이 ?? 

데이터 받아오면 fresh 상태임 근데 staletime 이 지나면 stale 상태로 변화됨 이때 staleTime 의 기본값은 0 임 

근데 굳이 이두개를 나눠놓은 이유가 뭘까 ???????????????????

staleTime 을 설정값을 줘서 얻을수 있는 이득은 뭘까?

즉 fresh 상태를 좀더 유지하고자 할때의 이점은 뭔가 ? 

 

같은 질문이다.ㅎㅎ

 

맨위에서 본 4가지경우에 refetchOnWindowFocus 에 의해 리페치과정이 일어난다 근데 이러한 과정은 fresh,stale 두가지 상태에 유효한 것은 아니다 fresh 상태에서는 위 4가지 경우여도 refetchOnWindowFocus 과정에 의해 리페치가 일어나지 않고 캐시된 데이터를 사용한다.

 

어떤 경우에 유용한지는 아직모르겠는데 일반적으로 리페칭을 해야하는 상황에서도 리페칭이 필요없는 상태가 fresh한 상태고 그외의 상황은 stale 상태여서 둘다 기본적으로 캐싱데이터를 사용 하지만 stale 상태는 특정상황에서 리페치가 되는구나 정도로 이해중이다.

 

그리고 두상태사이의 기준은 staleTime 으로 조절해줄수 있고 default 값은 0이다.