select: does structural sharing apply to the result of select? (stable between renders if shape doesn't change, even if not memoized).

[rik-iso]

Hi!

I've read various documents and Github answers but still am not 100% sure if I am using select correctly.

In particular, my question boils down to:

---

I know if I don't use a stable function or memoize the select function, the select function will run on every render. This is okay if it's cheap.

However, if I return a derived object or array from select (i.e. something which changes referentially every call), will data from React Query change referentially on every render even if shape is the same?

What if the query key changes (triggering queryFn), but the underlying transformed data is the same?

---

In code words:

const { data } = useQuery({
  queryKey: ['awesomeData', userId],
  queryFn: () => goGetSomeAwesomeData(userId), // [{ id: 1 }, { id: 2 }]
  select: (data) => data.map(item => item.id), // [1, 2]
})

// when does this fire?
useEffect(() => {
   console.log('your IDs, captain: ', ids)
   // 1. if queryKey stays the same, will data remain stable across renders?
   // 2. if queryKey changes, but select transforms it to the same shape, will data remain stable?
   // 3. if the answer to either of the above is "no", is the solution ensuring `select` is a stable function/memoized via `useCallback` etc?
}, [data])

tl;dr - My understanding is because of structural sharing, without select even if the queryKey changes but the result is the same shape then renders shouldn't happen because RQ reuses the old object. Does this also apply to the result of select?

I tested this lightly and I think the answer is "yes, it won't re-render" but would love to know for sure.

Thanks so much - and sorry if this is a repetitive question. I couldn't find an exact answer.

Rik

refs I read:
https://tkdodo.eu/blog/react-query-data-transformations#3-using-the-select-option
https://tkdodo.eu/blog/react-query-render-optimizations

• another article in the documentation I can't find right now which talked about structural sharing and useCallback with a todo list example.

[TkDodo]

yes, structural sharing is also applied to the result of select. I think I'm mentioning this in one of the articles you have linked :)

[rik-iso]

Thanks @TkDodo , I must have misread or not understood completely. That's perfect - this works so great, thank you. Appreciate the great DX of not having to think about this much.