Bug: useDeferredValue gets stuck with a stale value

[gaearon]

Essentially, I see useDeferredValue being stuck and never catching up.

Not sure if it's possible to extract it out of a Next.js app. I think it's probably a React bug because it seems related to core APIs, but I couldn't simplify it past the "render some JSX from server action" repro case.

Demo

Type "hello world".

In dev (npm run dev), the second text area catches up.

In prod (npm run build + npm start), the second text area often gets stuck and never catches up.

bug.mov

Code

Here is a repro case: https://github.com/gaearon/react-udv-bug/

This is the main harness:

export function TestPreviewClient() {
  const [promise, setPromise] = useState<Promise<ReactNode>>(initialPromise);
  const deferred = useDeferredValue(promise);

  function handleChange(value: string) {
    setPromise(renderAction(value));
  }

  return (
    <div style={{ padding: 16, fontFamily: "monospace" }}>
      <textarea
        placeholder="type here"
        onChange={(e) => handleChange(e.target.value)}
        rows={3}
        style={{ width: "100%", fontFamily: "monospace" }}
      />
      <div
        data-testid="deferred"
        style={{ border: "1px solid #ccc", padding: 8, minHeight: 40 }}
      >
        <Suspense fallback={<div>loading...</div>}>
          <Resolved promise={deferred} />
        </Suspense>
      </div>
    </div>
  );
}

Note these helpers:

export function ClientWrapper({ children }: { children: ReactNode }) {
  const t = performance.now();
  while (performance.now() - t < 2) {
    // do nothing
  }
  return <>{children}</>;
}

function Resolved({ promise }: { promise: Promise<ReactNode> }) {
  return <>{use(promise)}</>;
}

And this is the server part:

async function AsyncChild({
  children,
}: {
  children: ReactNode;
}): Promise<ReactNode> {
  await new Promise((r) => setTimeout(r, 1));
  return children;
}

async function Item({ children }: { children: ReactNode }): Promise<ReactNode> {
  return (
    <ClientWrapper>
      <AsyncChild>{children}</AsyncChild>
    </ClientWrapper>
  );
}

export async function renderAction(input: string): Promise<ReactNode> {
  return (
    <Item>
      <div>
        <Item>
          <div>{input}</div>
        </Item>
      </div>
    </Item>
  );
}

You can generally simplify this structure but then it will be harder to reproduce.

[gaearon]

If you run into this bug, this workaround helped me:

function Ticker({ children }: { children: ReactNode }) {
  const [, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((n) => n + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <>{children}</>;
}

Obviously this re-renders the tree inside every second which might not be amazing. Actually this is probably fine since it should be able to bail out, and this is enough to kick it.

[wrspada02]

Hey @gaearon. I'll investigate it deeper. Feel free to assign this ticket to me please.

[Pantkartik]

This looks like a scheduling issue where the lane created by useDeferredValue isn’t being retried when the promise resolves in production.

Hypothesis:
When use(promise) resolves, the Suspense ping does not properly reschedule the deferred lane. As a result, the deferred snapshot never catches up unless something else forces a re-render (like the Ticker workaround).

#approach i shall follow to solve :

I will ensure that when a promise resolves, the deferred lane is explicitly marked as updated and re-scheduled (markRootUpdated + ensureRootIsScheduled).

Alternatively, entangle the deferred lane with the originating update lane so the ping can’t miss it.

Add a regression test for useDeferredValue(Promise) + use() + Suspense under production build.

I will surely look over @gaearon for assigning me the issue will work on this and solve this as soon as possible .

[coder-ishan]

Root Cause: In packages/react-reconciler/src/ReactFiberRootScheduler.js, the function scheduleTaskForRootDuringMicrotask has this early-exit condition (lines 426-438):

if (
  nextLanes === NoLanes ||
  (root === workInProgressRoot && isWorkLoopSuspendedOnData()) ||
  root.cancelPendingCommit !== null
) {
  root.callbackNode = null;
  root.callbackPriority = NoLane;
  return NoLane;
}

When your deferred render for input "A" suspends on a promise (use(fetchData("A"))), the work loop enters SuspendedOnData state. If the user then types "B" before that promise resolves, React calls ensureRootIsScheduled to process the new urgent update — but the microtask hits the check above, sees the work loop is suspended on data, and bails out entirely, refusing to schedule the "B" update. The "B" update's deferred lane never gets picked up, leaving the component stuck showing the stale value.

This only happens in production because in dev mode, act() flushes all work synchronously via an actQueue (scheduleCallback lines 630-635 and scheduleImmediateRootScheduleTask lines 650-660), so the work loop is never in SuspendedOnData state at the moment new updates arrive.

Testing gap: React's existing test infrastructure uses act() which masks async scheduling bugs like this. It might be worth adding a production-scheduler test mode (similar to ReactDOMServerIntegrationTestUtils) that uses the real Scheduler with simulated async timing, so tests can catch race conditions between microtask scheduling and SuspendedOnData state that act()'s synchronous flushing inherently hides.

@gaearon Does this match what you're seeing? Would appreciate confirmation before proposing a fix.

[gaearon]

I'm not sure but you could try the repro case I offered and see whether patching this fixes the repro case.

[Pantkartik]

sure sir let me work over it