Describe the bug
The no-unstable-deps rule does not flag unstable query results when
useQueries is array-destructured. This is a false negative bad code
passes the lint rule when it shouldn't.
Reproduction
import { useQueries } from '@tanstack/react-query'
import { useEffect } from 'react'
function Component() {
const [userQuery, postsQuery] = useQueries({
queries: [
{ queryKey: ['user'], queryFn: fetchUser },
{ queryKey: ['posts'], queryFn: fetchPosts },
]
})
// userQuery is unstable — new object every render
// Should be flagged by no-unstable-deps, but is NOT
useEffect(() => {
console.log(userQuery.data)
}, [userQuery])
}
Root cause
collectVariableNames in no-unstable-deps.rule.ts only handles
Identifier patterns. When the result is array-destructured, the id
node is an ArrayPattern which is silently ignored so none of the
destructured variables are tracked as unstable.
Evidence this is unintentional
The sibling rule no-rest-destructuring in the same plugin already
handles ArrayPattern correctly for useQueries (lines 69–86 of
no-rest-destructuring.rule.ts), confirming this pattern is expected
and no-unstable-deps simply has a gap.
I have a fix ready and would like to submit a PR if this is confirmed.
Your minimal, reproducible example
N/A - This is an ESLint rule bug. The reproduction is a code snippet that should trigger the lint rule but doesn't. See steps below.
Steps to reproduce
- Install @tanstack/eslint-plugin-query and enable the no-unstable-deps rule
- Write this component:
import { useQueries } from '@tanstack/react-query'
import { useEffect } from 'react'
function Component() {
const [userQuery, postsQuery] = useQueries({
queries: [
{ queryKey: ['user'], queryFn: fetchUser },
{ queryKey: ['posts'], queryFn: fetchPosts },
]
})
useEffect(() => {
console.log(userQuery.data)
}, [userQuery])
}
- Run ESLint
- Observe: no error is reported on [userQuery] even though
userQuery is an unstable object reference
Expected behavior
The no-unstable-deps rule should flag array-destructured useQueries
results used in hook dependency arrays, the same way it flags
non-destructured results.
Example — this should produce a lint error:
const [userQuery] = useQueries({ queries: [...] })
useEffect(() => {}, [userQuery]) // ← should be flagged, currently is not
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- OS: Windows 11
- Node: 25.6.1
- Package manager: npm
- @tanstack/eslint-plugin-query: latest
Tanstack Query adapter
react-query
TanStack Query version
v5.100.0
TypeScript version
v5.5.4
Additional context
The root cause is in collectVariableNames in no-unstable-deps.rule.ts
it only handles Identifier patterns and silently ignores ArrayPattern.
The sibling rule no-rest-destructuring already handles ArrayPattern
correctly for useQueries (lines 69–86), confirming this is an
unintentional gap in no-unstable-deps.
I have a fix ready and would like to submit a PR if confirmed.
Describe the bug
The
no-unstable-depsrule does not flag unstable query results whenuseQueriesis array-destructured. This is a false negative bad codepasses the lint rule when it shouldn't.
Reproduction
Root cause
collectVariableNamesinno-unstable-deps.rule.tsonly handlesIdentifierpatterns. When the result is array-destructured, theidnode is an
ArrayPatternwhich is silently ignored so none of thedestructured variables are tracked as unstable.
Evidence this is unintentional
The sibling rule
no-rest-destructuringin the same plugin alreadyhandles
ArrayPatterncorrectly foruseQueries(lines 69–86 ofno-rest-destructuring.rule.ts), confirming this pattern is expectedand
no-unstable-depssimply has a gap.I have a fix ready and would like to submit a PR if this is confirmed.
Your minimal, reproducible example
N/A - This is an ESLint rule bug. The reproduction is a code snippet that should trigger the lint rule but doesn't. See steps below.
Steps to reproduce
import { useQueries } from '@tanstack/react-query'
import { useEffect } from 'react'
function Component() {
const [userQuery, postsQuery] = useQueries({
queries: [
{ queryKey: ['user'], queryFn: fetchUser },
{ queryKey: ['posts'], queryFn: fetchPosts },
]
})
useEffect(() => {
console.log(userQuery.data)
}, [userQuery])
}
userQuery is an unstable object reference
Expected behavior
The no-unstable-deps rule should flag array-destructured useQueries
results used in hook dependency arrays, the same way it flags
non-destructured results.
Example — this should produce a lint error:
const [userQuery] = useQueries({ queries: [...] })
useEffect(() => {}, [userQuery]) // ← should be flagged, currently is not
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
Tanstack Query adapter
react-query
TanStack Query version
v5.100.0
TypeScript version
v5.5.4
Additional context
The root cause is in
collectVariableNamesinno-unstable-deps.rule.tsit only handles
Identifierpatterns and silently ignoresArrayPattern.The sibling rule
no-rest-destructuringalready handlesArrayPatterncorrectly for
useQueries(lines 69–86), confirming this is anunintentional gap in
no-unstable-deps.I have a fix ready and would like to submit a PR if confirmed.