AlexWayne
AlexWayne
TtRPC
Created by AlexWayne on 6/14/2024 in #❓-help
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
5 replies