useQuery: isFetching vs isLoading

In additional to query status useQuery has so called fetchStatus and isFetching flag. It causes very frequent question about the difference of these flags so I’m trying to explain it.

isFetching and isLoading are not the same

Yes. Mostly if you load data – you fetch data. But in useQuery terms it’s become more complicated for some special cases.

To be precise flag isFetching is actually about fetching process, it includes fetching itself or refetching data in some cases.

The same time flag isLoading is more about state from application point of view.

So what does it mean?

Loading does not always mean Fetching

Let’s look at the case loading state of dependent queries in version 4

From the very beginning dependent query is in loading state, but is not fetching before another query success

In this case we have:

• isLoading: true
• isFetching: false ⚠️

So in this case we have set loading, but not fetching status!

And vice versa

Fetching does not always mean Loading

This is the case when we have set fetching status, but not set loading status!

Do you remember, that useQuery can fetch some data after loading state, being in success state? It’s so called refetch and could be catched using flag isRefetching. In this situation we have flags

• isLoading: false ⚠️
• isSuccess: true
• isFetching: true
• isRefetching: true

That’s it!

Conclusion

These cases are not very obvious, but still can happen at any time. So better to know!