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
- Enable
@tanstack/query/no-unstable-deps
- Wrap
useMutation in a custom hook that returns the result directly
- Use the whole mutation object in a
useEffect dependency array
- 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
Describe the bug
The
no-unstable-depsrule only tracks variables assigned directly from a named TanStack hook (e.g.const mutation = useMutation(...)). If you wrapuseMutationoruseQueryin a custom hook and return the result, the rule silently misses it when the whole object is placed in a dependency array.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
@tanstack/query/no-unstable-depsuseMutationin a custom hook that returns the result directlyuseEffectdependency arrayExpected 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:
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