chore: refactor useMutationState, fix tests

Author: crutchcorn

packages/react-query/src/__tests__/useMutationState.test.tsx

@@ -66,12 +66,15 @@ describe('useIsMutating', () => {
     const isMutatings: Array<number> = []
     const queryClient = createQueryClient()
 
-    function IsMutating() {
+    function IsMutatingBase() {
       const isMutating = useIsMutating({ mutationKey: ['mutation1'] })
       isMutatings.push(isMutating)
       return null
     }
 
+    // Memo to avoid other `useMutation` hook causing a re-render
+    const IsMutating = React.memo(IsMutatingBase)
+
     function Page() {
       const { mutate: mutate1 } = useMutation({
         mutationKey: ['mutation1'],
@@ -104,7 +107,7 @@ describe('useIsMutating', () => {
     const isMutatings: Array<number> = []
     const queryClient = createQueryClient()
 
-    function IsMutating() {
+    function IsMutatingBase() {
       const isMutating = useIsMutating({
         predicate: (mutation) =>
           mutation.options.mutationKey?.[0] === 'mutation1',
@@ -113,6 +116,8 @@ describe('useIsMutating', () => {
       return null
     }
 
+    const IsMutating = React.memo(IsMutatingBase);
+
     function Page() {
       const { mutate: mutate1 } = useMutation({
         mutationKey: ['mutation1'],

packages/react-query/src/useMutationState.ts

@@ -64,19 +64,20 @@ export function useMutationState<TResult = MutationState>(
   return React.useSyncExternalStore(
     React.useCallback(
       (onStoreChange) =>
-        mutationCache.subscribe(() => {
-          const nextResult = replaceEqualDeep(
-            result.current,
-            getResult(mutationCache, optionsRef.current),
-          )
-          if (result.current !== nextResult) {
-            result.current = nextResult
-            notifyManager.schedule(onStoreChange)
-          }
-        }),
+        mutationCache.subscribe(notifyManager.batchCalls(onStoreChange)),
       [mutationCache],
     ),
-    () => result.current,
+    () => {
+      const nextResult = replaceEqualDeep(
+        result.current,
+        getResult(mutationCache, optionsRef.current),
+      )
+      if (result.current !== nextResult) {
+        result.current = nextResult
+      }
+
+      return result.current
+    },
     () => result.current,
   )!
 }