본문으로 건너뛰기

쿼리 훅의 결과를 React 훅 의존성 배열에 직접 넣지 못하도록 합니다

다음 쿼리 훅에서 반환되는 객체는 참조적으로 안정적이지 않습니다:

  • useQuery
  • useSuspenseQuery
  • useQueries
  • useSuspenseQueries
  • useInfiniteQuery
  • useSuspenseInfiniteQuery
  • useMutation

해당 훅에서 반환된 객체를 React 훅(예: useEffect, useMemo, useCallback)의 종속성 배열에 직접 넣어서는 안 됩니다. 대신 쿼리 훅의 반환 값을 구조 분해하고, 구조 분해한 값을 React 훅의 의존성 배열에 전달합니다.

규칙 세부 정보​

이 규칙에 맞지 않는 잘못된 코드의 예:

/* 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
}

이 규칙에 맞는 올바른 코드의 예:

/* 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
}

속성​

  • ✅ 권장
  • 🔧 수정 가능