57 lines
1.5 KiB
Markdown
57 lines
1.5 KiB
Markdown
---
|
|
id: no-unstable-deps
|
|
title: Disallow putting the result of query hooks directly in a React hook dependency array
|
|
---
|
|
|
|
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.
|
|
|
|
## Rule Details
|
|
|
|
Examples of **incorrect** code for this rule:
|
|
|
|
```tsx
|
|
/* eslint "@tanstack/query/no-unstable-deps": "warn" */
|
|
import { useCallback } from 'react'
|
|
import { useMutation } from '@tanstack/react-query'
|
|
|
|
function Component() {
|
|
const mutation = useMutation({ mutationFn: (value: string) => value })
|
|
const callback = useCallback(() => {
|
|
mutation.mutate('hello')
|
|
}, [mutation])
|
|
return null
|
|
}
|
|
```
|
|
|
|
Examples of **correct** code for this rule:
|
|
|
|
```tsx
|
|
/* eslint "@tanstack/query/no-unstable-deps": "warn" */
|
|
import { useCallback } from 'react'
|
|
import { useMutation } from '@tanstack/react-query'
|
|
|
|
function Component() {
|
|
const { mutate } = useMutation({ mutationFn: (value: string) => value })
|
|
const callback = useCallback(() => {
|
|
mutate('hello')
|
|
}, [mutate])
|
|
return null
|
|
}
|
|
```
|
|
|
|
## Attributes
|
|
|
|
- [x] ✅ Recommended
|
|
- [ ] 🔧 Fixable
|