Skip to content

@tanstack/query/no-unstable-deps does not flag custom hooks that wrap and return useMutation/useQuery #10728

@philherbert

Description

@philherbert

Describe the bug

The no-unstable-deps rule only tracks variables assigned directly from a named TanStack hook (e.g. const mutation = useMutation(...)). If you wrap useMutation or useQuery in a custom hook and return the result, the rule silently misses it when the whole object is placed in a dependency array.

// flagged ✅
const mutation = useMutation({ mutationFn: fetch })
useEffect(() => {}, [mutation])

// not flagged ❌
const useMyMutation = () => useMutation({ mutationFn: fetch })
const mutation = useMyMutation()
useEffect(() => {}, [mutation]) // should warn, doesn't

https://github.com/philherbert/tanstack-query-eslint-unstable-deps-bug-reproduction

Your minimal, reproducible example

https://codesandbox.io/p/github/philherbert/tanstack-query-eslint-unstable-deps-bug-reproduction/main

Steps to reproduce

  1. Enable @tanstack/query/no-unstable-deps
  2. Wrap useMutation in a custom hook that returns the result directly
  3. Use the whole mutation object in a useEffect dependency array
  4. Run linting - see no warning

Expected behavior

The rule fires. The rule should warn regardless of whether the unstable object comes from a direct TanStack hook call or a custom hook wrapping one.

From the docs:

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.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macOS, Chrome (but this is a dev thing not a user-facing thing, so probably not relevant)

Tanstack Query adapter

react-query

TanStack Query version

5.100.9

TypeScript version

6.0.3

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions