HardEvent Loop & Batching💻 Output Question

startTransition marks updates as non-urgent

💡

Hint

startTransition tells React: this update can be interrupted. Use it for expensive non-urgent updates (search results, filtering) so the UI stays responsive during typing.

What does this output?

const log = [];

// Simulates React's startTransition
let isInTransition = false;
function startTransition(fn) {
  isInTransition = true;
  fn();
  isInTransition = false;
}

function setState(value, label) {
  if (isInTransition) {
    // Non-urgent: can be interrupted
    log.push([transition] ${label}=${value});
  } else {
    // Urgent: runs immediately
    log.push([urgent] ${label}=${value});
  }
}

// Urgent update (typing in input)
setState('a', 'query');

// Non-urgent update (filtering 10k items)
startTransition(() => {
  setState([1, 2, 3], 'results');
});

// Another urgent update interrupts
setState('ab', 'query');

console.log(log[0]);
console.log(log[1]);
console.log(log[2]);

Correct Output

[urgent] query=a
[transition] results=1,2,3
[urgent] query=ab

Why this output?

Explanation: Urgent updates (plain setState) run immediately. Transition updates are marked non-urgent — React can pause and discard them if urgent updates come in.

Key Insight: startTransition tells React: this update can be interrupted. Use it for expensive non-urgent updates (search results, filtering) so the UI stays responsive during typing.

Practice predicting output live →

66 output questions with instant feedback

💻 Try Output Quiz