Framework
Version
Search

Disallow putting the result of query hooks directly in a React hook dependency array

The object returned from the following query hooks is not referentially stable:

  • useQuery
  • useSuspenseQuery
  • useQueries
  • useSuspenseQueries
  • useInfiniteQuery
  • useSuspenseInfiniteQuery
  • useMutation

The object returned from those hooks should not be put directly into the dependency array of a React hook (e.g. useEffect, useMemo, useCallback). Instead, destructure the return value of the query hook and pass the destructured values into the dependency array of the React hook.

Rule Details

Examples of incorrect code for this rule:

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
}

Examples of correct code for this rule:

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
}

Attributes

  • ✅ Recommended
  • 🔧 Fixable
scarf analytics