isFetching vs isLoading

isFetching vs isLoading

isFetching은 비동기 쿼리가 해결되지 않았음을 의미한다. 즉, feching을 완료하지 않았다는 의미이다. async 함수가 해결되지 않았고 아직 데이터를 가져오는 중이다.

isLoading은 isFetching의 하위 집합이며 데이터를 가져오는 상태라는 것을 의미한다. 쿼리 함수가 해결되지 않았고 캐시 된 데이터가 없다. 표시할 캐시 데이터도 없다는 의미이다. 즉, isLoading 상태이면 isFetching은 참이다.

=> 별 차이가 없어 보일 수 있지만 페이지네이션을 할 때, 캐시 된 데이터가 있을 때와 없을 때를 구분해야 한다.

 

-예시

  if (isFetching) return <h3>Loading...</h3>;

이 코드에서는 캐시 된 데이터의 존재와 상관없이 "Loading..."을 보여준다. prefetch 이전에 행동하고 이는 nextPage 데이터를 포함한 캐시 데이터를 미리 가져오기 전이란 의미이다. 위 코드에서는 캐시에 데이터가 존재하는 것과 관련이 없어서 캐시에 데이터가 있어도 늘 나타날 것이다.