Guidance around useQueries / combine() referential stability

[KevinSchiener]

We love ReactQuery and I was really looking forward to the new combine() callback on useQueries.

After some testing it seams that the combine function will be run on each render. This means that I get a new combine-object, e.g., array on each render.

Is there some way to prevent combine calls and serve the old combination result if none of the queries changed, i.e., all queries are settled with their data?

The only workaround I came up with is to store the previous queries + combine result in a ref and, if the queries didn't change (some custom check), return the old combine result from the ref.

Thanks!

[TkDodo]

After some testing it seams that the combine function will be run on each render. This means that I get a new combine-object, e.g., array on each render.

The result of combine is structurally shared, meaning if nothing changed, you'll get the same array reference back. Have you tried putting the result of combine as dependency to a useEffect for example ?

Is there some way to prevent combine calls and serve the old combination result if none of the queries changed, i.e., all queries are settled with their data?

You'd need to check inside combine if all queries are settled and return something that you want if they aren't. That result will be structurally shared (see above), so it won't change reference even if it's called more than once.

[HarmonicTons]

Sorry to hijack this conversation but I have a similar question (tell me if I should open another thread :) ).

In my case I need to combine the results into a new structure. More precisely: I want to reduce the results into a record of key/values. Something like that:

type Device = {
  id: string;
  content: Content;
}

const combine = (
  results: UseQueryResult<
    Device,
    Error
  >[]
) => {
  return results.reduce<Record<string, Device[]>>((acc, result) => {
    const { data } = result;
    if (!data) return acc;
    return {
      ...acc,
      [data.id]: data.content,
    };
  }, {});
};

In that case useQueries will return a new reference at each render of the component calling it.
I found a solution by memoizing the combine function itself, but I was wondering if there was another better way to do that? Thanks!

[TkDodo]

In that case useQueries will return a new reference at each render of the component calling it.

does it really? because it shouldn't, unless there is something new inside it, in which case it has to. our structuralSharing feature should do the rest. Please show a reproduction if that isn't the case.

[HarmonicTons]

Thanks for your quick reply!
I did some more testing and you are right. Even though combine is called each time, the result stays the same instance. But I realized my problem was happening when we actually called useQueries without queries. We have something like:

export const useGetDevices = ({ ids }: { ids: string[] }) => {
 return useQueries({
   // queries are dynamically determined from the given ids
   queries: ids.map((id) => {
     return {
       queryKey: ["get-device", id],
       queryFn: async () => getDevice(id)
     };
   }),
   combine
 });
};

When no ids is given, queries is [] and then combine will always return a new instance of an empty object {}. And this is the issue I observed.

You can reproduce the issue in this codesandbox. Simply edit the app.tsx file to set ids to [] and click on the "render" button. You can see the useEffect is called each time in the console. It does not if ids is not empty.

Is this the wanted behavior for combine without queries, should I handle this case separately ?

[TkDodo]

thanks for the reproduction, this is a bug. can you file an issue please?

[HarmonicTons]

Thanks I just did :) Have a great day
#6369

[KevinSchiener]

Sorry for the late reply, I managed to debug my issue a bit more today and found the following:

1. If not using combine at all, the resulting UseQueryResult<TResult, Error>[] will always change its reference.
2. When using combine it was essential that I don't return any new MyClass() object. Neither a Map, Set or custom class.

Those two points were not clear to me and might make a good addition to the docs.

[TkDodo]

1. the referential stability check is a feature of combine. With all hook, you get a new top-level object / array back.
2. that's because it uses structuralSharing - the same optimization that you get with the queryFn and select. There, you also need to return json serializable structures for this to work.

Not saying it shouldn't be documented though - feel free to open a PR to the docs