useSuspenseQuery: Cannot update a component (MyProvider) while rendering a different component (MyComponentSuspended)

[macabeus]

I have a long process running in the queryFn function from a useSuspenseQuery, and I would like to update a context during this process. Thus, I can provide a granular feedback to the user.

As an attempt to make it, I wrote a (simplified) code as the following:

const useExpensiveData = ({ id }) => {
  const { dispatchProgress } = useContext(MyContext);

  const { data } = useSuspenseQuery({
    queryKey: ['useExpensiveData', id],
    queryFn: async () => {
      // the code here is much more complex
      dispatchProgress({ status: 1 });

      const foo = await getFoo()

      dispatchProgress({ status: 2 });

      const bar = await getBar(foo)

      return bar;
    },
  });

  return { data };
};

export function MyComponentSuspended() {
  const { data } = useExpensiveData({ id: 'abc' });

  return (
    <div>
      {data}
    </div>
  );
}

export function MyComponent() {
  const { progressState } = useContext(SnippetContext);

  return (
    <Suspense
      fallback={
        <div>
          {progressState}
        </div>
      }
    >
      <MyComponentSuspended />
    </Suspense>
  );
}

But it isn't working as expected.
It returns the error that I wrote in the question title:

Cannot update a component (MyProvider) while rendering a different component (MyComponentSuspended)

Since we can call setState within the queryFn from useQuery I expected that we could do the using useSuspenseQuery - but it isn't working, and I would like to use suspense for this hook.

How to solve this issue?

My main goal is to provide feedback during the long process, and I can't break it into smaller useSuspenseQuerys because I have an arbitrary number of tasks that would be hard to express into smaller hooks (it isn't only 2 as the above code).

---

I know that it can be "fixed" by wrapping the dispatchProgress call into requestAnimationFrame(() => { ... }) but I would like to avoid this workaround.

[TkDodo]

if this isn't working it's likely a react limitation. This error isn't coming from react-query, but from react itself.