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