Why does calling destructuring the useQuery result cause re-renders?

[githorse]

As discussed in "React Query Data Transformations", I'd like to use selectors to take different slices from a larger object. If the underlying larger object changes, but the derived/selected data used inside Component X does not, useQuery should not cause a state change / re-render in Component X.

By way of example, say I have a query that returns a pizza:

interface Pizza {
  crust: string
  cheese: string
  radius: number
}

and I have some hooks to take slices of pizza:

const usePizza = (select) =>
  useQuery({
    queryFn: () => Promise.resolve(InitialPizza),
    queryKey: ["pizza"],
    select
  });

export const useCrust =  () => usePizza((pizza) => pizza.crust);
export const useCheese = () => usePizza((pizza) => pizza.cheese);
export const useRadius = () => usePizza((pizza) => pizza.radius);

If I call useCheese, in an outer, high-level component, and I mutate the pizza's radius from elsewhere with useMutation (or, in my example, calling queryClient.setQueryData() directly), then as expected, useCheese does not re-render since the value of cheese did not change.

So far, so good. But say I want to add logging or something else slightly more complicated to my usePizza hook, like this:

const usePizza = (select) => {
  const query = useQuery({
    queryFn: () => Promise.resolve(InitialPizza),
    queryKey: ["pizza"],
    select
  });
  console.log(`usePizza: loading:`, query.isLoading)
  return {
    data: query.data,
    ...omit(query, "data")
  };
};

The return value is exactly the same as the other usePizza. But somehow this breaks the state management and does cause a re-render in the outer component calling useCheese. No amount of memoization seems to fix this:

  ...
  return useMemo(
    () => ({
      data: query.data,
      ...omit(query, "data"),
    }),
    [JSON.stringify(query.data)]
  );
  // still doesn't work :(

Interestingly, if I do a similar desctructuring in the derived hook, there's no problem:

const useCheese = () => {
  const query = usePizza(pizza => pizza.cheese);
  console.log(`useCheese:`, query.data)
  return query.data;
}

Try commenting in hooks.js to toggle the two different flavors of usePizza in this CodeSandbox example to see this in action.

I'm missing something fundamental here. Can somebody help me understand what's going on?

[87xie]

It appears to be related to tracked-properties.

{...omit(query, 'data')} looks like it is accessing all properties in the query result under the hood (check _.omit), which will make react-query think that you need to track all properties, such as dataUpdatedAt, isFetching, etc.

When you call queryClient.setQueryData(), it will also update the dataUpdatedAt, thus triggering an outer component re-render.

[githorse]

That's it! Any operation that looks at all the properties individually will cause the same behavior:

console.log(query.data)    # OK
console.log(query)         # bad
omit(query, 'data')        # bad
const foo = query          # OK
const foo = { ... query }  # bad
_.clone(query)             # bad

That's super cool but also really subtle. Wish I'd read the manual ...

[TkDodo]

we have a lint rule for that, at least for destructing: https://tanstack.com/query/v5/docs/eslint/no-rest-destructuring