@tanstack/react-query 4.22.3 → 4.22.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "4.22.3",
+  "version": "4.22.4",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "use-sync-external-store": "^1.2.0",
-    "@tanstack/query-core": "4.22.0"
+    "@tanstack/query-core": "4.22.4"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

package/src/__tests__/useMutation.test.tsx

@@ -1044,7 +1044,7 @@ describe('useMutation', () => {
     )
   })
 
-  test('should go to error state if onSuccess callback errors', async () => {
+  it('should go to error state if onSuccess callback errors', async () => {
     const error = new Error('error from onSuccess')
     const onError = jest.fn()
 
@@ -1079,7 +1079,7 @@ describe('useMutation', () => {
     expect(onError).toHaveBeenCalledWith(error, 'todo', undefined)
   })
 
-  test('should go to error state if onError callback errors', async () => {
+  it('should go to error state if onError callback errors', async () => {
     const error = new Error('error from onError')
     const mutateFnError = new Error('mutateFnError')
 
@@ -1115,7 +1115,7 @@ describe('useMutation', () => {
     await rendered.findByText('error: mutateFnError, status: error')
   })
 
-  test('should go to error state if onSettled callback errors', async () => {
+  it('should go to error state if onSettled callback errors', async () => {
     const error = new Error('error from onSettled')
     const mutateFnError = new Error('mutateFnError')
     const onError = jest.fn()
@@ -1154,4 +1154,60 @@ describe('useMutation', () => {
 
     expect(onError).toHaveBeenCalledWith(mutateFnError, 'todo', undefined)
   })
+
+  it('should not call mutate callbacks for mutations started after unmount', async () => {
+    const onSuccessMutate = jest.fn()
+    const onSuccessUseMutation = jest.fn()
+    const onSettledMutate = jest.fn()
+    const onSettledUseMutation = jest.fn()
+
+    function Page() {
+      const [show, setShow] = React.useState(true)
+      return (
+        <div>
+          <button onClick={() => setShow(false)}>hide</button>
+          {show && <Component />}
+        </div>
+      )
+    }
+
+    function Component() {
+      const mutation = useMutation({
+        mutationFn: async (text: string) => {
+          await sleep(10)
+          return text
+        },
+        onSuccess: onSuccessUseMutation,
+        onSettled: onSettledUseMutation,
+      })
+
+      return (
+        <div>
+          <button
+            onClick={() => {
+              setActTimeout(() => {
+                mutation.mutate('todo', {
+                  onSuccess: onSuccessMutate,
+                  onSettled: onSettledMutate,
+                })
+              }, 10)
+            }}
+          >
+            mutate
+          </button>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    fireEvent.click(rendered.getByRole('button', { name: /mutate/i }))
+    fireEvent.click(rendered.getByRole('button', { name: /hide/i }))
+
+    await waitFor(() => expect(onSuccessUseMutation).toHaveBeenCalledTimes(1))
+    await waitFor(() => expect(onSettledUseMutation).toHaveBeenCalledTimes(1))
+
+    expect(onSuccessMutate).toHaveBeenCalledTimes(0)
+    expect(onSettledMutate).toHaveBeenCalledTimes(0)
+  })
 })