Web Worker used for CPU-heavy operations

JavaScript has a single main thread. A synchronous CSV export that filters and serializes 50,000 rows, or a bcrypt hash in a form submit handler, blocks the main thread for 200–400ms (ISO-25010 time-behaviour). During that time the browser cannot respond to any user input, animate CSS transitions, or process other JavaScript. The UI appears frozen. Web Workers solve this by running the computation on a separate thread, leaving the main thread free to handle interactions — but only if the developer moves the work there deliberately.

Move CPU-heavy operations into a Web Worker. Create a dedicated worker file and communicate via postMessage:

// src/workers/export.worker.ts
self.addEventListener('message', (e: MessageEvent) => {
  const { rows } = e.data
  const csv = rows.map((r: Record<string, unknown>) => Object.values(r).join(',')).join('\n')
  self.postMessage({ csv })
})

// src/components/ExportButton.tsx
const worker = new Worker(new URL('../workers/export.worker.ts', import.meta.url))
worker.postMessage({ rows: largeDataset })
worker.onmessage = (e) => downloadFile(e.data.csv)

Always include a main-thread fallback for environments where Worker is unavailable:

const processData = typeof Worker !== 'undefined'
  ? () => useWorker(data)
  : () => processOnMainThread(data)  // SSR or worker-restricted environments

For simpler APIs, use Comlink to expose worker functions as async callables without manual message passing.