A Heavy Calculation Freezes the UI
A heavy calculation over sales data freezes a React UI. What do you do?
Answer out loud in under a minute: a definition, one concrete example, and one pitfall or trade-off.
Hints
Hint 1
The main thread can't paint while it computes. Where else can the work run — and if nowhere else, how do you let the browser breathe?
Solution
Show the approach
Answer
Move it to a Web Worker, pass the data with postMessage (or transfer an ArrayBuffer to avoid copying), and terminate the worker in the effect's cleanup. Without a worker, split the work into chunks and yield to the event loop between them. setImmediate doesn't exist in browsers, and requestIdleCallback was not enabled by default in Safari as of 18.1, so feature-detect and fall back to setTimeout. useDeferredValue keeps typing responsive while React renders the expensive result.