MediumEvent Loop & Batching💻 Output Question

Concurrent rendering — work can be interrupted

💡

Hint

Concurrent React can interrupt slow renders. This is why render functions must be pure — React may call them multiple times or discard partial results.

What does this output?

const log = [];
let interrupted = false;

// Simulates concurrent rendering — work can be interrupted
function doWork(items, onItem) {
  for (const item of items) {
    if (interrupted) {
      log.push('interrupted at ' + item);
      return false; // work abandoned
    }
    onItem(item);
  }
  return true; // completed
}

// Low priority work
const lowPriWork = [1, 2, 3, 4, 5];
let lowPriDone = false;

// Urgent work interrupts
setTimeout(() => {
  interrupted = true;
  log.push('urgent work runs');
  interrupted = false;
  // Low pri work would restart here in real React
}, 0);

const completed = doWork(lowPriWork, (n) => {
  log.push('processed ' + n);
  if (n === 3) interrupted = true; // simulate interrupt after item 3
});

console.log(completed);
console.log(log.join(' | '));

Correct Output

false
processed 1 | processed 2 | processed 3 | interrupted at 4

Why this output?

Explanation: Work processes items 1,2,3 then gets interrupted at 4. doWork returns false (not completed). In real Concurrent React, work is abandoned and restarted from scratch.

Key Insight: Concurrent React can interrupt slow renders. This is why render functions must be pure — React may call them multiple times or discard partial results.

Practice predicting output live →

66 output questions with instant feedback

💻 Try Output Quiz