useTransition pending state synchronization during interrupted renders

Pending State Persistence

In React 18+, the isPending flag from the useTransition hook remains true when a transition is interrupted by a higher-priority update. It does not reset or flicker during the interruption; it persists until the transition update is successfully committed to the DOM.

Mechanism of Interruption

When a high-priority event (like a keystroke) occurs during a transition render, React pauses or discards the current low-priority work to handle the urgent update. However, the transition itself is still "in flight" within React's internal update queue. Because the goal of the transition has not yet been achieved, the isPending state continues to signal to the user that a background operation is still processing.

Confirmed Behavior vs. Implementation Details

Scenario	isPending Value	Reasoning
Transition starts	true	Update is queued as non-urgent.
High-priority interrupt	true	The transition is paused, not cancelled.
Interrupt render commits	true	The urgent UI updates, but the transition is still pending.
Transition render commits	false	The final state is applied to the DOM.

Verification Steps

To verify this behavior in your environment (assuming React 18+), you can use the following pattern:

1. Create a component that triggers a heavy render inside startTransition.
2. Include a text input that updates a separate piece of state (high priority).
3. Log the isPending value to the console or display it in the UI.
4. Trigger the transition, then immediately type in the input field.

const [isPending, startTransition] = useTransition();
// ...
<div>Status: {isPending ? 'Loading...' : 'Idle'}</div>
<button onClick={() => startTransition(() => setLargeData(data))}>
  Load Data
</button>
<input onChange={(e) => setInputValue(e.target.value)} />

Observation: You will notice that the "Loading..." status remains visible even while the input field updates responsively, confirming that isPending tracks the overall transition lifecycle rather than individual render attempts.

Diagnostic Note

If you observe isPending flipping to false prematurely, please clarify if the high-priority update explicitly triggers a state change that logically cancels or overrides the transition's target state.