Open
Description
Describe the bug
export default function Page() {
const [n, setN] = useState(0);
const queries = useQueries({
queries: [...Array(n).keys()].map((i) => ({
queryKey: [i],
queryFn: () => i,
})),
combine,
});
console.log(n, queries.length);
return <button onClick={() => setN(n + 1)}>Increase</button>;
}
const combine = (results: any) => results;
Clicking a few times the "Increase" button would give those logs:
0 0
1 0
1 1
2 1
2 2
3 2
...
Which is not the correct behavior.
When I'm not using a stable reference, i.e. directly passing combine:
export default function Page() {
const [n, setN] = useState(0);
const queries = useQueries({
queries: [...Array(n).keys()].map((i) => ({
queryKey: [i],
queryFn: () => i,
})),
combine: (results) => results,
});
console.log(n, queries.length);
return <button onClick={() => setN(n + 1)}>Increase</button>;
}
I get those logs:
0 0
1 1
1 1
2 2
2 2
3 3
...
Which is the correct behavior.
Your minimal, reproducible example
https://codesandbox.io/p/devbox/dank-smoke-7h8ssj?file=%2Fsrc%2Findex.tsx
Steps to reproduce
Open the repro. Click on "Increase". Look at the logs.
Expected behavior
0 0
1 0
1 1
2 1
2 2
3 2
...
How often does this bug happen?
None
Screenshots or Videos
No response
Platform
Linux
Chrome
Tanstack Query adapter
react-query
TanStack Query version
5.59.20
TypeScript version
No response
Additional context
No response