Can useQueries return the same reference with the same query key and return value?

[ronny1020]

Hi everyone, I use useQueries to make multiple API requests with different parameters and use the return value in a react useMemo deps list. It's similar to the following.

const results= useQueries(....)

const users  = useMemo(() => results.map(({ user }) => user ), [result])

The problem is the useQueries will always return a new reference, so the useMemo will need to execute the callback every time due to the difference of the deps list during the react rerender. Is there a way to avoid this happening?

[TkDodo]

The top level array is new in every render, but data in each entry is referentially stable.

[ronny1020]

The top level array is new in every render, but data in each entry is referentially stable.

Thanks for the reply. The reason I use useQueries is that I'm not sure how many queries will be used. If I know that, I will just use multiple useQuery. Besides, since the useQueries returns an array. I think it's reasonable to use the whole thing, or I have to destruct it for the deps.

Is that the top level array isn't referentially stable on purpose?

[TkDodo]

Is that the top level array isn't referentially stable on purpose?

It was necessary to be compatible with concurrent react features as far as I remember. The example you are showing can be solved with select:

const results= useQueries(items.map(item => ({
  queryKey: ...,
  queryFn:  ...,
  select: data => data.user
})))