From d98b8fd0a214253643740b625c5168750944af44 Mon Sep 17 00:00:00 2001
From: Manuel Schiller <manuel.schiller@caligano.de>
Date: Sun, 18 Aug 2024 14:32:35 +0200
Subject: [PATCH] add doc

---
 docs/eslint/no-mutation-in-deps.md | 46 ++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 docs/eslint/no-mutation-in-deps.md

diff --git a/docs/eslint/no-mutation-in-deps.md b/docs/eslint/no-mutation-in-deps.md
new file mode 100644
index 0000000000..bba5b15162
--- /dev/null
+++ b/docs/eslint/no-mutation-in-deps.md
@@ -0,0 +1,46 @@
+---
+id: no-mutation-in-deps
+title: Disallow putting the result of useMutation directly in a React hook dependency array
+---
+
+The object returned from `useMutation` is **not** referentially stable, so it should **not** be put directly into the dependency array of a React hook (e.g. `useEffect`, `useMemo`, `useCallback`).
+Instead, destructure the return value of useMutation and pass the destructured values into the dependency array.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```tsx
+/* eslint "@tanstack/query/no-mutation-in-deps": "warn" */
+import { useCallback } from 'React'
+import { useMutation } from '@tanstack/react-query'
+
+function Component() {
+  const mutation = useMutation({ mutationFn: (value: string) => value })
+  const callback = useCallback(() => {
+    mutation.mutate('hello')
+  }, [mutation])
+  return null
+}
+```
+
+Examples of **correct** code for this rule:
+
+```tsx
+/* eslint "@tanstack/query/no-mutation-in-deps": "warn" */
+import { useCallback } from 'React'
+import { useMutation } from '@tanstack/react-query'
+
+function Component() {
+  const { mutate } = useMutation({ mutationFn: (value: string) => value })
+  const callback = useCallback(() => {
+    mutate('hello')
+  }, [mutate])
+  return null
+}
+```
+
+## Attributes
+
+- [x] ✅ Recommended
+- [ ] 🔧 Fixable