무엇
useIsFetching은 지금 페칭 중인 쿼리의 개수를 숫자로 돌려주는 훅이다. 앱 전역 로딩 표시를 만들 때 쓴다.
인자 없이 부르면 전체를, 필터를 주면 그 조건에 맞는 쿼리만 센다. 반환값이 0보다 크면 뭔가 로딩 중이라는 뜻이다.
const isFetching = useIsFetching()
// ['posts']로 시작하는 쿼리만
const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
무슨 일이 일어나나
이 훅은 특정 쿼리를 실행하지 않는다. QueryClient가 관리하는 모든 쿼리의 fetchStatus를 지켜보다가, fetching 상태인 것의 개수를 세어 돌려준다. 쿼리가 페칭에 들어가고 빠질 때마다 값이 반응적으로 갱신되므로, 이 숫자를 화면에 걸면 실시간 로딩 표시가 된다.
필터는 QueryFilters 형태로, queryKey로 범위를 좁히는 게 흔하다. 두 번째 인자로 커스텀 QueryClient를 넘길 수 있고, 생략하면 컨텍스트의 인스턴스를 쓴다.
사용법
숫자를 불리언처럼 써서 전역 스피너를 토글한다. 배경 리페치까지 포함하므로, 초기 로딩만이 아니라 모든 네트워크 활동을 잡는다.
import { useIsFetching } from '@tanstack/react-query'
export function GlobalSpinner() {
const isFetching = useIsFetching()
// 하나라도 페칭 중이면 표시
return isFetching ? <div className="spinner">동기화 중…</div> : null
}
실무 예시
특정 도메인의 로딩만 보여 주고 싶을 때 필터로 범위를 좁힌다. 여기서는 게시글 관련 쿼리가 도는 동안만 표시한다.
export function PostsBadge() {
const count = useIsFetching({ queryKey: ['posts'] })
return count > 0 ? <span>게시글 {count}건 갱신 중</span> : null
}
왜 중요한가
개별 쿼리의 로딩은 각 훅의 isFetching으로 충분하다. useIsFetching은 그걸 앱 단위로 모아 보는 좁은 용도의 도구다 — 상단 진행 바나 전역 스피너 하나 정도다. 없어도 앱은 돌아가지만, 흩어진 로딩을 한 곳에서 표현하고 싶을 때 간결하게 해결한다. 짝으로 뮤테이션을 세는 useIsMutating이 있다.
Reference