Return values of the custom hook called from two different components

[vineetdigit]

My apologies if this turns out to be a question about React hooks, rather than React Query.

I have defined a custom hook

function usePost(id) {
  const mutationKey = ["post", id];
  const { error, isError, isLoading, reset, mutate } = useMutation(
    (args) => PostAPI.Create(args.id, args.content),
    { mutationKey: mutationKey }
  );

  return { error, isError, isLoading, reset, mutate };
}

I have two components X and Y that use this hook. Y is a child of X.

function X({id}) {
  const {isError, isLoading} = usePost(id);
....
   return <Y id={id} />
}

function Y({id}) {
   const {error, reset, mutate} = usePost(id);
  ...
}

When Y calls mutate(), should X see the corresponding results reflected in isError and isLoading?

I tested this by throwing error and introducing delay in my API call, but isError and isLoading never become true.

Anything I'm doing wrong?

[TkDodo]

No, mutations only track state on a per-instance level. This works for queries though.

[caioaao]

From what I understand you can use useIsMutating for that behavior