Custom react query hook not re-rendering when triggered another component

[cgvalayev]

I have a custom hook like

const usePosts = () => {
  return useMutation(...);
};

And I use it in multiple components like

// CompA.jsx
const CompA = () => {
  const { mutate, isLoading } = usePosts();
  return <div>
     {isLoading && <Loader />}
    ...
    <button onClick={mutate}>Submit 1</button>
  </div>;
}
// CompB.jsx
const CompB = () => {
  const { mutate, isLoading } = usePosts();
  return <button onClick={mutate}>Submit 2</button>;
}
// App.jsx
const App = () => (
  <div>
    <CompA />
    <CompB />
  </div>
);

Hitting Submit 2 doesn't trigger re-render in CompA and therefore isLoading not working. Am I doing something wrong? Is this even supported?

[TkDodo]

mutations don’t share state with each other like queries do. If all you need is isLoading to be reflected, what you can do is provide a mutationKey and then call useIsMutating to filter for running mutations with that key

[cgvalayev]

Thank you for a quick reply! I incapsulate loading logic using useIsMutating into usePosts and it works perfectly.