useQueries combine result not memoized

[oblador]

According to documentation, the way to reduce re-renders with useQuery is to use a referentially stable select option that will then be memoized.

With useQueries there is no select option, but a combine which functionally is essentially the same. However even if it returns a referentially equal result it will still cause a re-render every time a dependent query is updated. This means there is no convenient way to optimise queries with many dependencies. IMHO it would be preferable if only instances where the combined result changed would cause rerenders.

Related: #7233

Example/reproduction: https://stackblitz.com/edit/vite-react-ts-jnyua9?file=src%2FApp.tsx

[paulobmarcos]

I agree with this one, as it would make the behaviour similar to useQuery and would avoid unnecessary re-renders.

Probably having a select would be overkill, since combine can already combine only the things we want, but a select could still be useful.

Let's say we want to combine multiple results, but in different situations we would like to still reuse the same useQueries abstraction, as it handles all of the necessary calls, but "subscribe" to different pieces of information.

[paulobmarcos]

Brief Example:

const useMyData = (select) => {
   return useQueries({ ..., select });
}

const ComponentA = () => {
  const result = useMyData((combinedData) => data.id);
}

const ComponentB = () => {
  const result = useMyData((combinedData) => data.name);
}

[TkDodo]

hmm yeah there is something wrong. if combine returns a stable value, there shouldn’t be any more re-renders 🤔

[oblador]

Want me to convert this into an issue?

[TkDodo]

sure, would you like to take a stab at fixing it?

[oblador]

I started looking into this and I'm unsure how to properly implement this to be honest. For example the options passed to QueryObserver are never used , neither are the ones passed to setQueries(). I'm lacking a lot of context here, but I think it would require a non-trivial refactor to actually make use of the combine option inside the observer or do something patchy in useQueries().

[TkDodo]

I have a fix here:

• fix(core): do not inform QueriesObserver subscribers if combined result hasn't changed #8153

[oblador]

I can confirm this fixes it for me! Thank you so much for the quick fix 🥳

[TkDodo]

awesome 🎉

[mrudowski]

Hi,

I think a have a problem with this change - please take a look on this example and click "Update first query result".
Component with useQueries doesn't refresh with new value.
https://stackblitz.com/edit/vite-react-ts-iybfwe?file=src%2FApp.tsx

in version 5.59.3 - before this change - it works fine
https://stackblitz.com/edit/vite-react-ts-vl8q1r?file=src%2FApp.tsx

[TkDodo]

Thanks for reporting @mrudowski. I debugged this a bit and found out that this is a problem in property tracking. Somewhere along the way, we are losing our property tracking, so what gets passed to combine is a plain object, and we think you’re only interested in the pending prop. Since that prop doesn’t change when you call setQueryData, the re-render gets skipped.

This should definitely work, I’ll have to look deeper where we are losing that. If you want a workaround, you need to access .data before you do the early return:

https://stackblitz.com/edit/vite-react-ts-ck3x9f