Skip to content

[Bug] no-unstable-deps rule misses array-destructured useQueries results #10746

Description

@vinamra1102

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

  1. Install @tanstack/eslint-plugin-query and enable the no-unstable-deps rule
  2. 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])
}

  1. Run ESLint
  2. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions