Skip to content

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

@vinamra1102

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
    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