What is the difference between `isLoading` and `isFetching` in React Query?

These two states serve different purposes:
isLoading:

• True only during the first fetch when there's no cached data
• False if there's any cached data, even if a background refetch is happening
• Used to show initial loading states
  isFetching:
• True whenever any fetch is happening (initial or background)
• True during background refetches even if cached data exists
• Used to show loading indicators for any fetching activity

const { data, isLoading, isFetching } = useQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts
});
// First load: isLoading = true, isFetching = true
// Background refetch: isLoading = false, isFetching = true
// With cached data: isLoading = false, isFetching = false

This distinction allows you to show different UI states - a full loading screen for initial loads and a subtle indicator for background updates.