useIsFetching

Description: A standalone hook (not a useFetch option) that returns true if any data fetching is currently in progress (globally or for a specific key).

• How To: Use useIsFetching to show global loading indicators or to monitor specific data requests.

  // Global loading indicator
  function GlobalLoader() {
      const isFetching = useIsFetching();
      if (!isFetching) return null;
      return <div className="spinner">Loading data...</div>;
  }
  
  // Monitoring a specific fetch key
  function DataStatus({ userId }) {
      const isFetchingUser = useIsFetching(['user', userId]);
      return <span>{isFetchingUser ? 'Refreshing user data...' : ''}</span>;
  }

• Best Practice: Use useIsFetching to provide visual feedback for background data synchronization, especially when using suspense: false or when monitoring refetches that don't trigger a full Suspense fallback.

Deep Dive: How isFetching works step by step

Example:

const isFetching = useIsFetching();

What happens step by step:

1. A fetch operation starts
   • DataClient initiates a fetch (via useFetch, refetch, or execute).
   • The key for the fetch is added to the internal fetches set.
   • A 'load' event is published (globally or for the specific key).
2. useIsFetching() is notified
   • The hook is subscribed to the 'load' event.
   • With a key: If a key was provided to the hook, it listens to updates for that specific key.
   • Global (no key): If no key was provided, it listens to the global 'load' event.
   • The subscription callback is triggered.
3. Hook re-renders
   • The hook checks the status of the request.
   • With a key: It returns true only if that specific cache entry's status is 'fetching'.
   • Global (no key): It returns true if client.pendingFetches() is true (at least one fetch is active in the system).
4. Fetch completes
   • DataClient removes the key from the fetches set.
   • A final 'load' event is published.
5. Hook re-renders again
   • The hook now returns false (unless other fetches are still active in the global case).

Key Difference from isMutating: useIsFetching is highly optimized to track either the entire system's fetching state or a specific key's status, making it ideal for granular UI feedback during background updates.