Chapter 66: useIsFetching

Core Idea

Reactive hook wrapper around queryClient.isFetching() — subscribes to the count of currently-fetching queries (optionally filtered) without manually wiring a QueryCache subscription, the standard building block for an app-wide loading indicator.

Key Concepts

• No arguments: counts every fetching query app-wide (background fetches included, not just initial loads).
• filters (QueryFilters): scope the count to a key prefix/predicate — e.g. useIsFetching({ queryKey: ['posts'] }) for a section-specific indicator instead of global.
• queryClient: optional explicit override, defaults to context.

Code Examples

const isFetching = useIsFetching() // app-wide count
const isFetchingPosts = useIsFetching({ queryKey: ['posts'] }) // scoped count

• What it demonstrates: global vs. key-scoped fetching indicators using the same hook.

Key Takeaways

1. This is the reactive counterpart to queryClient.isFetching() — use the hook inside components, the imperative method outside React.
2. Scope with filters for section-level indicators rather than always going global.

Connects To

• Background Fetching Indicators: the guide this hook's global-indicator pattern comes from.
• QueryClient: isFetching(), the imperative equivalent.