React Query: Loading flags

Queries

isLoading or `status === ‘loading’`

Is true whenever the query has no data yet and is fetching for the first time.

Use when you want to check if the initial request is in-flight.

isPending

Is true whenever there’s no cached data yet and no query attempt has finished yet.

Use if you want to check whether data is available yet. For most scenarios, prefer isPending to isLoading if you want to check if query data is available before rendering it. See related discussion here.

isFetching

Is true whenever a request is in-flight – whether it’s the initial request or subsequent background refetches.

Use when you want to check any request is in-flight – whether the initial request or subsequent refetches.

isRefetching

Is true whenever a request is in-flight, but doesn’t include the initial request. Equivalent to isFetching && !isLoading.

Use when you want to check if a subsequent background refetch is in-flight and you don’t care for the initial request.

Links

• React Query docs