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

useQuery

call using

useMemo

useMemo

, which results in everything being called twice whenever there's a change.

I moved the code from

useMemo

useMemo

into a

select

select

handler and extracted the handler to a stable function reference.

However, when

useQuery

useQuery

params change, it looks like the

select

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

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

select

handler again.

Here's a slightly simplified code:

const { data, isLoading } = useCustomQuery(
  { ids },
  { ...options, select: transformData },
)

const { data, isLoading } = useCustomQuery(
  { ids },
  { ...options, select: transformData },
)

and

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

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

BTW. We're still on the "latest" version of react-query 3 :/

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

useQuery

call using

useMemo

useMemo

, which results in everything being called twice whenever there's a change.

I moved the code from

useMemo

useMemo

into a

select

select

handler and extracted the handler to a stable function reference.

However, when

useQuery

useQuery

params change, it looks like the

select

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

select

select

select

handler again.

Here's a slightly simplified code:

const { data, isLoading } = useCustomQuery(
  { ids },
  { ...options, select: transformData },
)

const { data, isLoading } = useCustomQuery(
  { ids },
  { ...options, select: transformData },
)

and

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

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

BTW. We're still on the "latest" version of react-query 3 :/

When is "select" function called exactly?

Similar Threads

When is "select" function called exactly?

Similar Threads

Similar Threads

Similar Threads