DEV Community

Cover image for React Query - useIsFetching & useIsMutation
Luca Del Puppo for This is Learning

Posted on • Originally published at blog.delpuppo.net on

React Query - useIsFetching & useIsMutation

Hey folks,

Today it is time to talk about two hooks exposed by react query: useIsFetching and useIsMutation.

Each of these hooks could be used to understand if there is a fetching request or if there is a mutation request ongoing in the application.

They are useful if we need to create a global loader that appears when there are one or more requests on going.

But how can you use them?

Let's start with the useIsFetching.

import { useIsFetching } from '@tanstack/react-query';

export default function Loader() {
  const isFetching = useIsFetching();
  if (!isFetching) return null;

  return <>Fetching...</>
}
Enter fullscreen mode Exit fullscreen mode

As you can see, the syntax is pretty simple. You can import the hook from the library and you can use the hook in your components. The hook returns only a boolean value that indicates if there are one or more fetching requests in the application. Then with this data, you can decide if you have to show a loader or not. Easy peasy!

Now it's time to move to the useIsMutation hook. This hook is similar to the previous one, the only different concept is that this hook handles the mutation requests. Let's see an example!

import { useIsMutating } from '@tanstack/react-query';

export default function Loader() {
  const isMutating = useIsMutating();
  if (!isMutating) return null;

  return <>Mutating...</>
}
Enter fullscreen mode Exit fullscreen mode

As you can notice, the syntax is the same as the previous one, the only difference stands in the name of the hook and in its concept.

If you want to find more about these two hooks see my Youtube video about them.

Ok, I think you have an idea of how these two hooks work. I hope you enjoyed this content.

See you soon folks

Bye Bye 👋

p.s. you can find the code of the video here

Photo by Rahul Mishra on Unsplash

Top comments (3)

Collapse
 
reacthunter0324 profile image
React Hunter

I heard these today via this article :)
Thank you

Collapse
 
puppo profile image
Luca Del Puppo

I'm happy you enjoyed my articles :)

Collapse
 
waystogo profile image
shiva prasad reddy

Awesome, Can you please add an example where in if we want to skip loading for one or two APIs.