v10 useQueries does not return a stable reference

I though this code would work downstream for memos and callbacks, but it does not. The memo and effect are re-ran every render.

Have I don't something stupid, here or is this intended? How would I memoize a derives values from the results?

This code:

  const results = trpcReactQuery.useQueries((trpc) =>
    things.map((thing) =>
      trpc.things.byId({ thingId: thing.id }),
    ),
  )
  console.log('')
  console.log('--- render ---')

  useEffect(() => {
    console.log('results changed', results.length)
  }, [results])

  const foo = useMemo(() => {
    console.log('memo recreated')
    return results.map((result) => result.data?.id)
  }, [results])

  const results = trpcReactQuery.useQueries((trpc) =>
    things.map((thing) =>
      trpc.things.byId({ thingId: thing.id }),
    ),
  )
  console.log('')
  console.log('--- render ---')

  useEffect(() => {
    console.log('results changed', results.length)
  }, [results])

  const foo = useMemo(() => {
    console.log('memo recreated')
    return results.map((result) => result.data?.id)
  }, [results])

Logs this:

--- render ---
memo recreated
results changed 0

--- render ---
memo recreated
results changed 0

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 0

--- render ---
memo recreated
results changed 0

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

v10 useQueries does not return a stable reference

  const results = trpcReactQuery.useQueries((trpc) =>
    things.map((thing) =>
      trpc.things.byId({ thingId: thing.id }),
    ),
  )
  console.log('')
  console.log('--- render ---')

  useEffect(() => {
    console.log('results changed', results.length)
  }, [results])

  const foo = useMemo(() => {
    console.log('memo recreated')
    return results.map((result) => result.data?.id)
  }, [results])

  const results = trpcReactQuery.useQueries((trpc) =>
    things.map((thing) =>
      trpc.things.byId({ thingId: thing.id }),
    ),
  )
  console.log('')
  console.log('--- render ---')

  useEffect(() => {
    console.log('results changed', results.length)
  }, [results])

  const foo = useMemo(() => {
    console.log('memo recreated')
    return results.map((result) => result.data?.id)
  }, [results])

Logs this:

--- render ---
memo recreated
results changed 0

--- render ---
memo recreated
results changed 0

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 0

--- render ---
memo recreated
results changed 0

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

--- render ---
memo recreated
results changed 28

v10 useQueries does not return a stable reference

Similar Threads

v10 useQueries does not return a stable reference

Similar Threads

Similar Threads

Similar Threads