禁止将查询 Hook 的结果直接放入 React Hook 依赖数组中
从以下查询 Hook 返回的对象是非引用稳定的
- useQuery
- useSuspenseQuery
- useQueries
- useSuspenseQueries
- useInfiniteQuery
- useSuspenseInfiniteQuery
- useMutation
从这些 Hook 返回的对象**不应该**直接放入 React Hook 的依赖数组中（例如，useEffect、useMemo、useCallback）。相反，解构查询 Hook 的返回值，并将解构后的值传递到 React Hook 的依赖数组中。
规则详情
此规则的错误代码示例
tsx
/* eslint "@tanstack/query/no-unstable-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
}
/* eslint "@tanstack/query/no-unstable-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
}
此规则的正确代码示例
tsx
/* eslint "@tanstack/query/no-unstable-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
}
/* eslint "@tanstack/query/no-unstable-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
}
属性
- ✅ 推荐
- 🔧 可修复
