query
query copied to clipboard
Incorrect behavior with `React.use(promise)`
Describe the bug
const pollingTasks = new Map();
function Example() {
const { data } = useSuspenseQuery({
queryKey: ['repoData'],
queryFn: () => {
return axios
.get('https://api.github.com/repos/tannerlinsley/react-query')
.then((res) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(res.data);
}, 1000);
});
});
},
});
const id = useId();
const t = true;
if (t) {
console.log('c', !pollingTasks.has(id), t, !pollingTasks.has(id) || t);
if (!pollingTasks.has(id) || t) {
console.log('create new one');
const promise = new Promise((resolve) => {
setTimeout(() => {
console.log('resolve');
resolve();
}, 1000);
});
pollingTasks.set(id, promise);
use(promise);
}
}
const p = pollingTasks.get(id);
console.log('run', id);
use(p); // <-- should trigger infinite re-render
return (
<div>
<h1>{data.name}</h1>
<p>{data.description}</p>
<strong>👀 {data.subscribers_count}</strong>{' '}
<strong>✨ {data.stargazers_count}</strong>{' '}
<strong>🍴 {data.forks_count}</strong>
</div>
);
}
Your minimal, reproducible example
https://stackblitz.com/edit/tanstack-query-lb2sln?file=src%2Findex.jsx
Steps to reproduce
Just run it
Expected behavior
Should show an infinite loopIt should
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- ANY
Tanstack Query adapter
react-query
TanStack Query version
v5.18.0
TypeScript version
No response
Additional context
No response
If you comment L28-L41, the behavior will be correct. So this is tanstack query issue