useQuery: isFetching vs isLoadingMarat Latypov
In additional to query status useQuery has so called
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
These cases are not very obvious, but still can happen at any time. So better to know!