Context
I’m suspending components infinitely as a hack to emulate React Offscreen/Activity. However, if you suspend during a low-priority render triggered within startTransition
, React waits for Suspense to unsuspend before completing the render. In other words, if I start suspending components infinitely in the middle of a low-priority render, my UI will freeze infinitely. Here’s more details: https://github.com/facebook/react/issues/29126
Question
Is there a good way to check if the current render is a low-priority render triggered within startTransition
? I don’t mind checking React internals, since apparently Offscreen is coming in React 19 anyway, so this hack is temporary.
The only solution I can think of without using React internal state is this:
const [isPending, startTransition] = useTransition();
const prevIsPending = useRef();
useEffect(() => {
prevIsPending.current = isPending;
});
const isLowPriorityRender = !isPending && prevIsPending.current;
This seems unreliable though, I’d assume there are edge-cases when this doesn’t work. E.g. maybe there’s a scenario when there are 2 consecutive low-priority updates. Is there a better way to do this?