In this article, we are going to be talking about loading and fetching states in React Query.

Basically in React query when we talk about isLoading we mean when a request is first sent to the server, while we are expecting a response we basically are in our loading state.

const { isLoading, data } = useQuery("superHeroes",fetchSuperHeroes);

if (isLoading) return <h1>Loading...</h1>;

By default React Query displays the cached data and asynchronously does a network call, checking if the information on the server has been updated (isFetching) if the information has been updated the UI updates.

Using staleTime we can also tell our useQuery to refetch/check the server after a period in milliseconds, this default set to zero.

const { isLoading, data, isFetching } = useQuery("superHeroes",fetchSuperHeroes, {
    staleTime: 5000
});

So we only do a refetch after 5ms.

I hope you get the point. Happy Coding, drop a question or feedback in the comments.