Use isPending, isLoading and isFetching flags with React Query

Tomasz Ducin
InstructorTomasz Ducin
Share this video with your friends

Social Share Links

Send Tweet
Published 5 months ago
Updated a week ago

There are nuances between the three loading states provided by the useQuery hook:

  • isPending: there's no data and a query hasn't been made yet.
  • isFetching: the query is being fetched
  • isLoading: there's no data, and there's a query currently being fetched. Notice that it's a combination of the above.

In this lesson, you'll learn where you'd want to use each of these states.

[00:00] Let's destructure some more properties which determine whether the query is in loading state. So we have is pending and we also want the is loading one and the other one is going to be is fetching. So there is more, but these are the ones that we're interested in. So the difference between them is that is pending [00:20] determines that there is no data available within the query, so that there is no data for this component to display. It means, basically, that the query entry exists, but it's empty. Is fetching determines that there is a request that has been sent from the client to a server, but the response hasn't arrived yet. [00:40] So we're basically during the time of fetching. And is loading is something that we can consider as is initially loading because, technically, it boils down to is pending and is fetching at the same time. So we have no data yet, and we are during fetching, which essentially can take place only initially. [01:00] So what we're going to start with is actually is fetching since we can initially load the data. But it could happen that for any reasons, we might be re fetching the data so that even though something might be displayed over here, we would also like to show a spinner or any kind of message, which would denote that there is some [01:20] request that we are awaiting for its response. So let's put some conditional rendering over here, which will say that if we are during fetching, we just want to show a message or a spinner, whatever that is. So let's save it and let's see how it looks. So initially, we could see the loading message [01:39] available over here. But we'll also trigger a fact that if we walk to another page and we would go back to the employees, what React Query is going to find out is that the query is being stale. So it would refetch it. So what we can see is that both the data and the loading message is being displayed. Let's [01:59] see it once again. Both the data and the message is displayed. And this is because we do have the data available for this component to be displayed, which means it's not pending because the data is there, but we're also fetching or actually re fetching the data. So if we want to use the is pending, that basically [02:19] means that there is no data to be displayed yet. And finally, if we want to use the is loading, that basically means that we have never had any data loaded yet. So in most of these situations, is loading and is pending actually boils down to the same [02:39] place, but let's just see how is loading is going to be displayed. So we have seen we have never had any data loaded yet. So is loading is going to return early in this case. So most often, what you would like to do is probably something like this. And since is loading is a type of is pending, this is what [02:59] you're going to use with most of the cases.

egghead
egghead
~ 25 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today