Sự khác biệt giữa isLoading và isFetching trong useQuery?

isLoading = true chỉ lần fetch đầu chưa có cache (show skeleton toàn trang); isFetching = true MỌI KHI đang fetch kể cả background refetch (show subtle indicator).

• Đây là câu phỏng vấn rất phổ biến. isLoading (hay status === 'pending'): true CHỈ khi fetch lần đầu VÀ chưa có cached data — dùng để show loading skeleton/spinner toàn trang. isFetching: true MỌI KHI đang fetch, kể cả background refetch khi đã có cached data — dùng để show subtle indicator (spinning icon nhỏ, progress bar mờ).

Ví dụ thực tế: user vào trang Products lần đầu → isLoading=true, show skeleton.

• User navigate đi rồi quay lại → có cached data nên isLoading=false (show data cũ ngay), nhưng isFetching=true (đang refetch background).
• Thêm isRefetching = isFetching && !isLoading (đang refetch có data cũ).

isLoading = true only on first fetch with no cached data (show full skeleton); isFetching = true on any fetch including background refetch (show subtle indicator). isLoading is true only during the initial fetch when there is no cached data yet — the query is in the 'loading' state.

• It transitions to false once data is first received. isFetching is true whenever a fetch is in progress — including background refetches, refetches on window focus, and invalidations after mutations.
• It stays true during any network request for that query.
• Practical difference: isLoading is used to show a loading skeleton on initial render; isFetching is used to show a loading indicator during background updates.
• Example: if data is cached and stale, navigating back shows the stale data immediately (isLoading is false) while React Query fetches fresh data in the background (isFetching is true).
• In v5, isPending replaces isLoading for new semantics: isPending is true when there is no cached data regardless of whether a fetch is in progress.