TanStackT
TanStack•3y ago•
4 replies
foolish-indigo

When is "select" function called exactly?

Hi!

I'm working on reducing number of re-renders of a particularly slow component. Currently, we are transforming data returned by 
useQuery
 call using useMemo, which results in everything being called twice whenever there's a change.

I moved the code from useMemo into a select handler and extracted the handler to a stable function reference.

However, when 
useQuery
 params change, it looks like the select handler is called twice - once with the new data, as expected, and then the second time with exactly the same data as before.

As my select handler is not memoized and returns a new instance of an object for the same input data every time it's called, it causes an additional re-render.

Is it supposed to work like this? I thought that if the response data hasn't changed, react-query won't even call the select handler again.

Here's a slightly simplified code:
const { data, isLoading } = useCustomQuery(
  { ids },
  { ...options, select: transformData },
)

and
export const myCustomQuery = (params, options) =>
  useQuery(
    ['customQuery', params],
    () => fetchData(params),
    options,
  )


BTW. We're still on the "latest" version of react-query 3 :/
Was this page helpful?