Disallow object rest destructuring on query results

· abundance's blog

Use object rest destructuring on query results automatically subscribes to every field of the query result, which may cause unnecessary re-renders. This makes sure that you only subscribe to the fields that you actually need.

Rule Details #

Examples of incorrect code for this rule:

1/* eslint "@tanstack/query/no-rest-destructuring": "warn" */
2
3const useTodos = () => {
4  const { data: todos, ...rest } = useQuery({
5    queryKey: ['todos'],
6    queryFn: () => api.getTodos(),
7  })
8  return { todos, ...rest }
9}

Examples of correct code for this rule:

1const todosQuery = useQuery({
2  queryKey: ['todos'],
3  queryFn: () => api.getTodos(),
4})
5
6// normal object destructuring is fine
7const { data: todos } = todosQuery

When Not To Use It #

If you set the notifyOnChangeProps options manually, you can disable this rule. Since you are not using tracked queries, you are responsible for specifying which props should trigger a re-render.

Attributes #