query icon indicating copy to clipboard operation
query copied to clipboard

Incorrect behavior with `React.use(promise)`

Open himself65 opened this issue 2 years ago • 1 comments

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

himself65 avatar Jan 31 '24 03:01 himself65

If you comment L28-L41, the behavior will be correct. So this is tanstack query issue

himself65 avatar Jan 31 '24 03:01 himself65