isLoading vs isFetching vs isRefetching!

Caner Kuru
3 min readDec 19, 2022

ReactQuery, also known as TanStack Query, is a library that provides a simple, yet powerful way to fetch, cache, and manage data in your React applications. It is designed to work seamlessly with the React ecosystem.

This library’s got a ton of cool hooks for working with APIs. I’ve been mostly messing around with useQuery, useMutation, and useInfiniteQuery. Each one returns an object packed with super handy properties. I won’t get into every single one in this blog post, but do yourself a favor and check them out here: https://tanstack.com/query/v4/docs/react/reference/useQuery.

Heads up! This documentation is tailored for TanStack Query v4. The developers have recently released TanStack Query v5. Explore the new version here: https://tanstack.com/query/v5/docs/react/reference/useQuery

The properties that seem to cause the most confusion are isLoading, isFetching, and isRefetching. Let me explain what those are:

isLoading: This state is set to true exclusively during the initial data fetching.

isFetching: This state is true every time an API call is made, regardless if we did it manually or not.

isRefetching: This state is only true when we’re deliberately refetching with the refetch() function.

--

--

Caner Kuru

React.js & React Native Guru | TanStack/React Query Lover | Software Engineer | Gamer