fix: prevent state update after mutation unmounted

Author: boschni

src/react/tests/useMutation.test.tsx

@@ -456,4 +456,24 @@ describe('useMutation', () => {
 
     consoleMock.mockRestore()
   })
+
+  it('should not change state if unmounted', async () => {
+    function Mutates() {
+      const { mutate } = useMutation(() => sleep(10))
+      return <button onClick={() => mutate()}>mutate</button>
+    }
+    function Page() {
+      const [mounted, setMounted] = React.useState(true)
+      return (
+        <div>
+          <button onClick={() => setMounted(false)}>unmount</button>
+          {mounted && <Mutates />}
+        </div>
+      )
+    }
+
+    const { getByText } = renderWithClient(queryClient, <Page />)
+    fireEvent.click(getByText('mutate'))
+    fireEvent.click(getByText('unmount'))
+  })
 })

src/react/useMutation.ts

@@ -9,7 +9,11 @@ import {
   UseMutationOptions,
   UseMutationResult,
 } from './types'
-import { MutationFunction, MutationKey } from '../core/types'
+import {
+  MutationFunction,
+  MutationKey,
+  MutationObserverResult,
+} from '../core/types'
 
 // HOOK
 
@@ -86,7 +90,19 @@ export function useMutation<
 
   // Subscribe to the observer
   React.useEffect(
-    () => observer.subscribe(notifyManager.batchCalls(setCurrentResult)),
+    () =>
+      observer.subscribe(
+        notifyManager.batchCalls(
+          (
+            result: MutationObserverResult<TData, TError, TVariables, TContext>
+          ) => {
+            // Check if the component is still mounted
+            if (observer.hasListeners()) {
+              setCurrentResult(result)
+            }
+          }
+        )
+      ),
     [observer]
   )