Docs
ESLINT
No Rest Destructuring

Disallow Object Rest Destructuring on Query Results

쿼리 결과에서 객체 나머지(rest) 구조 분해를 사용하면 쿼리 결과의 모든 필드에 자동으로 구독하게 되어 불필요한 재렌더링이 발생할 수 있습니다. 이 규칙은 실제로 필요한 필드에만 구독하도록 보장합니다.

규칙 세부사항

이 규칙에 대한 잘못된 코드 예제:

/* eslint "@tanstack/query/no-rest-destructuring": "warn" */
 
const useTodos = () => {
  const { data: todos, ...rest } = useQuery({
    queryKey: ["todos"],
    queryFn: () => api.getTodos(),
  });
  return { todos, ...rest };
};

이 규칙에 대한 올바른 코드 예제:

const todosQuery = useQuery({
  queryKey: ["todos"],
  queryFn: () => api.getTodos(),
});
 
// 일반 객체 구조 분해는 괜찮습니다.
const { data: todos } = todosQuery;

사용하지 않아야 하는 경우

notifyOnChangeProps 옵션을 수동으로 설정하는 경우 이 규칙을 비활성화할 수 있습니다. 추적된 쿼리를 사용하지 않으므로, 어떤 속성이 재렌더링을 트리거할지 명시하는 것은 사용자 책임입니다.

속성

  • ✅ 추천됨
  • 🔧 자동 수정 불가
Exhaustive DepsNo Unstable Deps