禁止将查询钩子的结果直接放入 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
}

属性

✅ 推荐
🔧 可修复