Skip to content

no-unstable-deps eslint rule has false positives #9776

@JosNun

Description

@JosNun

Describe the bug

I have a useQuery hook from my router , and I'm passing the result of that into a useCallback, and the no-unstable-deps rule is flagging it as unstable, even though it's not.

eg:

import { useQuery } from './router';

function SomeComponent() {
  const query = useQuery();

  const onChange = useCallback((selection: string) => {
    setRoute({
      query: {
        ...query,
        selection,
      },
    })
  }, [query])
//    ^ eslint warning about useQuery result not being referentially stable

  return <></>
}

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/elated-sun-nh3m34 (worth noting, I couldn't get eslint working in CSB, so it's just a code reference)

Steps to reproduce

  1. Have an existing useQuery hook that is not from Tanstack query
  2. Use the return value of that hook as a dependency in a hook that has a dependency array (useEffect, useMemo, useCallback, etc)

Expected behavior

As a user, I would not expect an error here, since the return value of my hook may be referentially stable. Errors should only show up if the useQuery is imported form Tanstack query.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

N/A

  • @tanstack/eslint-plugin-query: 5.91.2
  • eslint: 9.32.0

Tanstack Query adapter

react-query

TanStack Query version

v5.90.2

TypeScript version

v5.4.5

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions