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.
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(' | '));false processed 1 | processed 2 | processed 3 | interrupted at 4
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.