The Underrated Power of Web Workers in React Apps

Offloading CPU-heavy tasks off the main thread, Comlink for cleaner worker APIs, use cases in data processing and real-time filtering, and why most React apps are doing expensive work in the wrong place.

---

The Main Thread Problem You're Ignoring

Every React app runs on a single thread. Your component renders, your event handlers, your useMemo computations, your JSON parsing, your array filtering—all competing for the same 16.67ms frame budget (at 60fps). When you exceed that budget, frames drop. The browser can't respond to clicks. Scroll becomes janky. Your app feels broken.

The typical response? "Let's optimize the algorithm" or "add memoization." These help, but they're treating symptoms. The real problem: you're doing work that doesn't belong on the main thread.

┌─────────────────────────────────────────────────────────────┐
│                      MAIN THREAD                            │
├─────────────────────────────────────────────────────────────┤
│  React Render │ Layout │ Paint │ Event │ Your 50ms Filter  │
│      5ms      │  2ms   │  3ms  │  1ms  │    BLOCKING       │
└─────────────────────────────────────────────────────────────┘
                                          ↑
                                    Frame dropped
                                    User sees jank

Web Workers exist specifically to solve this. They've been supported since IE10. Yet most React codebases I encounter don't use them at all, or use them incorrectly.

---

How Web Workers Actually Work

A Web Worker is a separate JavaScript execution context running in its own OS thread. It has:

• Its own event loop
• Its own global scope (self instead of window)
• No access to the DOM
• No access to most browser APIs (localStorage, document, etc.)
• Communication via structured cloning (message passing)

The Structured Clone Algorithm

When you postMessage data to a worker, the browser doesn't share memory. It serializes the data using the structured clone algorithm, copies it across thread boundaries, then deserializes it in the worker.

// Main thread
worker.postMessage(largeArray); // Serialization cost: O(n)

// Worker receives a COPY, not a reference
self.onmessage = (e) => {
  const copy = e.data; // Deserialization cost: O(n)
};

What can be cloned:

• Primitives, Arrays, Objects, Maps, Sets, Dates, RegExp, Blobs, Files, ArrayBuffers, ImageData

What cannot be cloned:

• Functions, DOM nodes, Error objects (lose stack trace), Symbols, WeakMaps/WeakSets

This has implications. Passing a 10MB JSON object incurs serialization overhead on both ends. For small payloads, negligible. For large datasets, this cost can exceed the savings from offloading.

Transferable Objects: Zero-Copy Transfer

For ArrayBuffer and related types (MessagePort, ImageBitmap, OffscreenCanvas), you can transfer ownership instead of copying:

const buffer = new ArrayBuffer(1024 * 1024 * 100); // 100MB

// SLOW: Structured clone (copies 100MB)
worker.postMessage(buffer);

// FAST: Transfer ownership (zero-copy)
worker.postMessage(buffer, [buffer]);
// buffer.byteLength is now 0 - ownership transferred

Transfer is O(1) regardless of size. The tradeoff: the original thread loses access entirely. This is perfect for scenarios where you're handing off data for processing and don't need it until the worker returns results.

SharedArrayBuffer: True Shared Memory

For scenarios requiring bidirectional access without transfer, SharedArrayBuffer allows actual shared memory between threads:

// Main thread
const sharedBuffer = new SharedArrayBuffer(1024);
const sharedArray = new Int32Array(sharedBuffer);
worker.postMessage(sharedBuffer);

// Worker
self.onmessage = (e) => {
  const view = new Int32Array(e.data);
  // Both threads see the same memory
  Atomics.add(view, 0, 1); // Thread-safe increment
};

Critical requirements:

1. Site must be cross-origin isolated (Cross-Origin-Opener-Policy: same-origin + Cross-Origin-Embedder-Policy: require-corp)
2. You must handle synchronization yourself via Atomics
3. Race conditions are your responsibility

Most React apps don't need this complexity. Transferables + message passing cover 95% of use cases.

---

Integrating Workers with React

The Naive Approach (Don't Do This)

function SearchResults({ query, data }) {
  const [results, setResults] = useState([]);

  useEffect(() => {
    // Creates a new worker on every mount
    const worker = new Worker(new URL('./search.worker.ts', import.meta.url));

    worker.postMessage({ query, data });
    worker.onmessage = (e) => setResults(e.data);

    return () => worker.terminate();
  }, [query, data]);

  return <ResultsList results={results} />;
}

Problems:

1. Worker instantiation has overhead (~1-5ms per worker)
2. Worker script parsing happens on each mount
3. No request cancellation—stale results can arrive after new queries
4. data gets cloned on every query change

Production Pattern: Singleton Worker with Request Management

// workers/search.worker.ts
interface SearchRequest {
  id: string;
  query: string;
  data: unknown[];
}

interface SearchResponse {
  id: string;
  results: unknown[];
  duration: number;
}

self.onmessage = (e: MessageEvent<SearchRequest>) => {
  const { id, query, data } = e.data;
  const start = performance.now();

  // Your expensive operation
  const results = data.filter(item =>
    item.name.toLowerCase().includes(query.toLowerCase())
  );

  const response: SearchResponse = {
    id,
    results,
    duration: performance.now() - start,
  };

  self.postMessage(response);
};

// hooks/useSearchWorker.ts
import { useEffect, useRef, useState, useCallback } from 'react';

type WorkerStatus = 'idle' | 'processing' | 'error';

interface UseSearchWorkerResult<T> {
  search: (query: string, data: T[]) => void;
  results: T[];
  status: WorkerStatus;
  duration: number | null;
  cancel: () => void;
}

// Singleton worker instance
let searchWorker: Worker | null = null;
let activeRequests = new Map<string, (results: unknown[]) => void>();

function getSearchWorker(): Worker {
  if (!searchWorker) {
    searchWorker = new Worker(
      new URL('../workers/search.worker.ts', import.meta.url),
      { type: 'module' }
    );

    searchWorker.onmessage = (e) => {
      const { id, results } = e.data;
      const callback = activeRequests.get(id);
      if (callback) {
        callback(results);
        activeRequests.delete(id);
      }
    };

    searchWorker.onerror = (e) => {
      console.error('Worker error:', e);
      // Reject all pending requests
      activeRequests.clear();
    };
  }
  return searchWorker;
}

export function useSearchWorker<T>(): UseSearchWorkerResult<T> {
  const [results, setResults] = useState<T[]>([]);
  const [status, setStatus] = useState<WorkerStatus>('idle');
  const [duration, setDuration] = useState<number | null>(null);
  const currentRequestId = useRef<string | null>(null);

  const cancel = useCallback(() => {
    if (currentRequestId.current) {
      activeRequests.delete(currentRequestId.current);
      currentRequestId.current = null;
      setStatus('idle');
    }
  }, []);

  const search = useCallback((query: string, data: T[]) => {
    // Cancel any in-flight request
    cancel();

    if (!query.trim()) {
      setResults([]);
      setStatus('idle');
      return;
    }

    const id = crypto.randomUUID();
    currentRequestId.current = id;
    setStatus('processing');

    const startTime = performance.now();

    activeRequests.set(id, (workerResults) => {
      // Only update if this is still the current request
      if (currentRequestId.current === id) {
        setResults(workerResults as T[]);
        setDuration(performance.now() - startTime);
        setStatus('idle');
        currentRequestId.current = null;
      }
    });

    getSearchWorker().postMessage({ id, query, data });
  }, [cancel]);

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      cancel();
    };
  }, [cancel]);

  return { search, results, status, duration, cancel };
}

This pattern handles:

• Singleton worker (instantiated once, reused across components)
• Request IDs to correlate responses
• Stale request cancellation
• Proper cleanup on unmount
• Status tracking for loading states

---

Comlink: Eliminating the Boilerplate

The message-passing ceremony becomes tedious. Comlink (by Google Chrome team) provides RPC-style semantics over postMessage:

// workers/analytics.worker.ts
import { expose } from 'comlink';

const analytics = {
  async processDataset(data: number[]): Promise<{
    mean: number;
    stdDev: number;
    percentiles: Record<number, number>;
  }> {
    // Expensive computation
    const sorted = [...data].sort((a, b) => a - b);
    const mean = data.reduce((a, b) => a + b, 0) / data.length;

    const squaredDiffs = data.map(x => Math.pow(x - mean, 2));
    const variance = squaredDiffs.reduce((a, b) => a + b, 0) / data.length;
    const stdDev = Math.sqrt(variance);

    const getPercentile = (p: number) => {
      const index = Math.ceil((p / 100) * sorted.length) - 1;
      return sorted[Math.max(0, index)];
    };

    return {
      mean,
      stdDev,
      percentiles: {
        25: getPercentile(25),
        50: getPercentile(50),
        75: getPercentile(75),
        90: getPercentile(90),
        99: getPercentile(99),
      },
    };
  },

  async filterOutliers(data: number[], threshold: number): Promise<number[]> {
    const { mean, stdDev } = await this.processDataset(data);
    return data.filter(x => Math.abs(x - mean) <= threshold * stdDev);
  },
};

expose(analytics);

export type AnalyticsWorker = typeof analytics;

// hooks/useAnalyticsWorker.ts
import { wrap, Remote } from 'comlink';
import { useEffect, useRef } from 'react';
import type { AnalyticsWorker } from '../workers/analytics.worker';

let workerInstance: Remote<AnalyticsWorker> | null = null;
let rawWorker: Worker | null = null;

function getAnalyticsWorker(): Remote<AnalyticsWorker> {
  if (!workerInstance) {
    rawWorker = new Worker(
      new URL('../workers/analytics.worker.ts', import.meta.url),
      { type: 'module' }
    );
    workerInstance = wrap<AnalyticsWorker>(rawWorker);
  }
  return workerInstance;
}

export function useAnalyticsWorker() {
  const worker = useRef(getAnalyticsWorker());

  // Comlink methods return promises - use them directly
  return worker.current;
}

// Usage in component
function DataAnalysis({ dataset }: { dataset: number[] }) {
  const analytics = useAnalyticsWorker();
  const [stats, setStats] = useState(null);

  useEffect(() => {
    let cancelled = false;

    analytics.processDataset(dataset).then(result => {
      if (!cancelled) setStats(result);
    });

    return () => { cancelled = true; };
  }, [dataset, analytics]);

  // ...
}

Comlink with Transferables

// Explicit transfer with Comlink
import { transfer } from 'comlink';

const buffer = new ArrayBuffer(1024 * 1024);
// Transfer ownership to worker
await worker.processBuffer(transfer(buffer, [buffer]));

Comlink Gotchas

1. Every call is async - Even synchronous worker functions return Promises
2. Proxy overhead - Each property access creates a Promise; batch operations when possible
3. Circular references - Structured cloning limitations still apply
4. Error handling - Worker errors become rejected promises

// BAD: Multiple round-trips
const a = await worker.getA();
const b = await worker.getB();
const c = await worker.getC();

// GOOD: Batch into single call
const { a, b, c } = await worker.getAll();

---

Real-World Use Cases

1. Large List Filtering with Fuzzy Search

// workers/fuzzySearch.worker.ts
import { expose } from 'comlink';
import Fuse from 'fuse.js';

interface SearchableItem {
  id: string;
  name: string;
  description: string;
  tags: string[];
}

let fuseInstance: Fuse<SearchableItem> | null = null;
let cachedData: SearchableItem[] = [];

const fuzzySearch = {
  initialize(data: SearchableItem[]) {
    cachedData = data;
    fuseInstance = new Fuse(data, {
      keys: ['name', 'description', 'tags'],
      threshold: 0.3,
      includeScore: true,
      ignoreLocation: true,
    });
  },

  search(query: string, limit = 50): SearchableItem[] {
    if (!fuseInstance) {
      throw new Error('Worker not initialized. Call initialize() first.');
    }

    if (!query.trim()) {
      return cachedData.slice(0, limit);
    }

    return fuseInstance
      .search(query, { limit })
      .map(result => result.item);
  },

  // Incremental update without full reindex
  addItems(items: SearchableItem[]) {
    if (!fuseInstance) {
      this.initialize(items);
      return;
    }

    cachedData.push(...items);
    items.forEach(item => fuseInstance!.add(item));
  },
};

expose(fuzzySearch);

Key insight: The Fuse.js index lives in worker memory. Initialize once, query many times. Main thread only receives filtered results.

2. CSV/JSON Parsing and Transformation

// workers/dataTransform.worker.ts
import { expose } from 'comlink';
import Papa from 'papaparse';

const dataTransform = {
  parseCSV(csvString: string): {
    data: Record<string, unknown>[];
    errors: Papa.ParseError[];
    meta: Papa.ParseMeta;
  } {
    const result = Papa.parse(csvString, {
      header: true,
      dynamicTyping: true,
      skipEmptyLines: true,
    });

    return {
      data: result.data as Record<string, unknown>[],
      errors: result.errors,
      meta: result.meta,
    };
  },

  transformAndAggregate(
    data: Record<string, unknown>[],
    groupByField: string,
    aggregateField: string,
    operation: 'sum' | 'avg' | 'count' | 'min' | 'max'
  ): Map<string, number> {
    const groups = new Map<string, number[]>();

    for (const row of data) {
      const key = String(row[groupByField] ?? 'unknown');
      const value = Number(row[aggregateField]) || 0;

      if (!groups.has(key)) {
        groups.set(key, []);
      }
      groups.get(key)!.push(value);
    }

    const result = new Map<string, number>();

    for (const [key, values] of groups) {
      let aggregated: number;

      switch (operation) {
        case 'sum':
          aggregated = values.reduce((a, b) => a + b, 0);
          break;
        case 'avg':
          aggregated = values.reduce((a, b) => a + b, 0) / values.length;
          break;
        case 'count':
          aggregated = values.length;
          break;
        case 'min':
          aggregated = Math.min(...values);
          break;
        case 'max':
          aggregated = Math.max(...values);
          break;
      }

      result.set(key, aggregated);
    }

    return result;
  },
};

expose(dataTransform);

3. Image Processing with OffscreenCanvas

// workers/imageProcessor.worker.ts
import { expose, transfer } from 'comlink';

const imageProcessor = {
  async applyGrayscale(imageData: ImageData): Promise<ImageData> {
    const data = imageData.data;

    for (let i = 0; i < data.length; i += 4) {
      const gray = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
      data[i] = gray;     // R
      data[i + 1] = gray; // G
      data[i + 2] = gray; // B
      // Alpha unchanged
    }

    return imageData;
  },

  async resize(
    imageBitmap: ImageBitmap,
    targetWidth: number,
    targetHeight: number
  ): Promise<ImageBitmap> {
    const canvas = new OffscreenCanvas(targetWidth, targetHeight);
    const ctx = canvas.getContext('2d')!;

    ctx.drawImage(imageBitmap, 0, 0, targetWidth, targetHeight);

    return canvas.transferToImageBitmap();
  },

  async generateThumbnails(
    imageBitmap: ImageBitmap,
    sizes: number[]
  ): Promise<ImageBitmap[]> {
    const aspectRatio = imageBitmap.width / imageBitmap.height;

    return Promise.all(
      sizes.map(size => {
        const width = size;
        const height = Math.round(size / aspectRatio);
        return this.resize(imageBitmap, width, height);
      })
    );
  },
};

expose(imageProcessor);

// Main thread usage
const worker = wrap<typeof imageProcessor>(
  new Worker(new URL('./imageProcessor.worker.ts', import.meta.url))
);

// Transfer the ImageBitmap to avoid copying
const bitmap = await createImageBitmap(file);
const thumbnails = await worker.generateThumbnails(
  transfer(bitmap, [bitmap]),
  [64, 128, 256]
);

4. Real-time Form Validation

// workers/validation.worker.ts
import { expose } from 'comlink';
import { z } from 'zod';

// Complex schema that's expensive to run on every keystroke
const userSchema = z.object({
  email: z.string().email(),
  password: z
    .string()
    .min(8)
    .regex(/[A-Z]/, 'Must contain uppercase')
    .regex(/[a-z]/, 'Must contain lowercase')
    .regex(/[0-9]/, 'Must contain number')
    .regex(/[^A-Za-z0-9]/, 'Must contain special character'),
  username: z
    .string()
    .min(3)
    .max(20)
    .regex(/^[a-zA-Z0-9_]+$/, 'Only alphanumeric and underscore'),
  phone: z.string().regex(/^\+?[1-9]\d{1,14}$/, 'Invalid phone format'),
  birthDate: z.string().refine(
    (date) => {
      const parsed = new Date(date);
      const age = (Date.now() - parsed.getTime()) / (365.25 * 24 * 60 * 60 * 1000);
      return age >= 13 && age <= 120;
    },
    { message: 'Must be between 13 and 120 years old' }
  ),
});

const validation = {
  validateUser(data: unknown): {
    success: boolean;
    errors: Record<string, string[]>;
  } {
    const result = userSchema.safeParse(data);

    if (result.success) {
      return { success: true, errors: {} };
    }

    const errors: Record<string, string[]> = {};
    for (const issue of result.error.issues) {
      const path = issue.path.join('.');
      if (!errors[path]) errors[path] = [];
      errors[path].push(issue.message);
    }

    return { success: false, errors };
  },

  // Validate single field for real-time feedback
  validateField(
    fieldName: keyof z.infer<typeof userSchema>,
    value: unknown
  ): { valid: boolean; errors: string[] } {
    const fieldSchema = userSchema.shape[fieldName];
    const result = fieldSchema.safeParse(value);

    if (result.success) {
      return { valid: true, errors: [] };
    }

    return {
      valid: false,
      errors: result.error.issues.map(i => i.message),
    };
  },
};

expose(validation);

---

Worker Pooling for Parallel Processing

For CPU-bound tasks that can be parallelized, a worker pool distributes work across multiple cores:

// lib/workerPool.ts
import { wrap, Remote, transfer } from 'comlink';

interface Task<T, R> {
  data: T;
  transferables?: Transferable[];
  resolve: (result: R) => void;
  reject: (error: Error) => void;
}

export class WorkerPool<T, R> {
  private workers: Remote<{ process: (data: T) => Promise<R> }>[] = [];
  private rawWorkers: Worker[] = [];
  private queue: Task<T, R>[] = [];
  private activeWorkers = new Set<number>();

  constructor(
    private workerUrl: URL,
    private poolSize: number = navigator.hardwareConcurrency || 4
  ) {
    this.initialize();
  }

  private initialize() {
    for (let i = 0; i < this.poolSize; i++) {
      const worker = new Worker(this.workerUrl, { type: 'module' });
      this.rawWorkers.push(worker);
      this.workers.push(wrap(worker));
    }
  }

  async process(data: T, transferables?: Transferable[]): Promise<R> {
    return new Promise((resolve, reject) => {
      this.queue.push({ data, transferables, resolve, reject });
      this.processQueue();
    });
  }

  private async processQueue() {
    if (this.queue.length === 0) return;

    // Find an idle worker
    const idleWorkerIndex = this.workers.findIndex(
      (_, i) => !this.activeWorkers.has(i)
    );

    if (idleWorkerIndex === -1) return; // All workers busy

    const task = this.queue.shift()!;
    this.activeWorkers.add(idleWorkerIndex);

    try {
      const worker = this.workers[idleWorkerIndex];
      const result = await worker.process(
        task.transferables
          ? transfer(task.data, task.transferables)
          : task.data
      );
      task.resolve(result);
    } catch (error) {
      task.reject(error instanceof Error ? error : new Error(String(error)));
    } finally {
      this.activeWorkers.delete(idleWorkerIndex);
      this.processQueue(); // Process next task
    }
  }

  async processAll(items: T[]): Promise<R[]> {
    return Promise.all(items.map(item => this.process(item)));
  }

  terminate() {
    this.rawWorkers.forEach(w => w.terminate());
    this.workers = [];
    this.rawWorkers = [];
    this.queue = [];
  }
}

// Usage
const pool = new WorkerPool<ArrayBuffer, ProcessedData>(
  new URL('./processor.worker.ts', import.meta.url),
  4 // 4 workers
);

// Process 100 chunks in parallel across 4 workers
const results = await pool.processAll(dataChunks);

---

Performance Measurement

Don't guess—measure the actual overhead:

// utils/workerBenchmark.ts
interface BenchmarkResult {
  mainThreadTime: number;
  workerTime: number;
  overhead: number;
  recommendation: 'use-worker' | 'use-main-thread';
}

export async function benchmarkWorkerVsMainThread<T, R>(
  operation: (data: T) => R,
  workerOperation: (data: T) => Promise<R>,
  testData: T,
  iterations = 5
): Promise<BenchmarkResult> {
  // Warm up
  operation(testData);
  await workerOperation(testData);

  // Benchmark main thread
  const mainThreadTimes: number[] = [];
  for (let i = 0; i < iterations; i++) {
    const start = performance.now();
    operation(testData);
    mainThreadTimes.push(performance.now() - start);
  }

  // Benchmark worker (includes message passing overhead)
  const workerTimes: number[] = [];
  for (let i = 0; i < iterations; i++) {
    const start = performance.now();
    await workerOperation(testData);
    workerTimes.push(performance.now() - start);
  }

  const avgMainThread = mainThreadTimes.reduce((a, b) => a + b) / iterations;
  const avgWorker = workerTimes.reduce((a, b) => a + b) / iterations;
  const overhead = avgWorker - avgMainThread;

  return {
    mainThreadTime: avgMainThread,
    workerTime: avgWorker,
    overhead,
    // Worker wins if main thread blocks for more than 16ms (frame budget)
    // AND worker overhead doesn't make it significantly slower
    recommendation: avgMainThread > 16 && overhead < avgMainThread * 0.5
      ? 'use-worker'
      : 'use-main-thread',
  };
}

Rules of thumb:

• Operations under ~10ms: Main thread is usually fine
• Operations 10-50ms: Consider workers if they run frequently
• Operations 50ms+: Almost always use workers
• Data transfer under 1KB: Negligible overhead
• Data transfer 1MB+: Consider transferables or chunking

---

When NOT to Use Workers

Workers aren't free. Don't use them for:

1. Simple, fast operations - Parsing a small JSON, filtering 100 items. The message-passing overhead exceeds computation time.

2. DOM manipulation - Workers can't access the DOM. If your bottleneck is rendering, workers won't help.

3. Operations requiring synchronous results - Workers are inherently async. If you need a synchronous return value (rare in modern React), workers don't fit.

4. Highly interactive features with minimal computation - Drag-and-drop, hover effects. The latency from message passing creates visible lag.

5. Code that relies on browser APIs - localStorage, document, window.location. Workers don't have access.

---

Debugging Workers

Chrome DevTools

1. Open DevTools → Sources → Threads panel
2. Workers appear as separate threads
3. Set breakpoints normally
4. Console.log from workers appears in main console

Common Pitfalls

"Worker is undefined"

// Wrong: Bundler can't resolve the worker path
const worker = new Worker('./worker.ts');

// Right: Use URL constructor for proper resolution
const worker = new Worker(
  new URL('./worker.ts', import.meta.url),
  { type: 'module' }
);

Stale closures in message handlers

// Bug: handler captures stale state
useEffect(() => {
  worker.onmessage = (e) => {
    setResults(e.data.filter(item => item.categoryId === categoryId));
    // categoryId might be stale!
  };
}, []); // Missing categoryId dependency

// Fix: Include dependencies or use ref
const categoryIdRef = useRef(categoryId);
useEffect(() => {
  categoryIdRef.current = categoryId;
}, [categoryId]);

Memory leaks from unreleased workers

// Bug: Worker never terminated
useEffect(() => {
  const worker = new Worker(workerUrl);
  worker.postMessage(data);

  // Missing cleanup!
}, [data]);

// Fix: Always cleanup
useEffect(() => {
  const worker = new Worker(workerUrl);
  worker.postMessage(data);

  return () => worker.terminate();
}, [data]);

---

Architecture Decision Framework

┌─────────────────────────────────────────────────────────────────┐
│                    Should I Use a Web Worker?                    │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
                ┌─────────────────────────┐
                │ Does operation take     │
                │ more than ~50ms?        │
                └─────────────────────────┘
                     │              │
                    Yes            No
                     │              │
                     ▼              ▼
         ┌───────────────┐   ┌─────────────────────┐
         │ Use Worker    │   │ Does it run on      │
         │ (likely)      │   │ every keystroke/    │
         └───────────────┘   │ scroll/frame?       │
                             └─────────────────────┘
                                  │           │
                                 Yes         No
                                  │           │
                                  ▼           ▼
                      ┌───────────────┐  ┌───────────────┐
                      │ Consider      │  │ Main thread   │
                      │ Worker +      │  │ is fine       │
                      │ Debouncing    │  └───────────────┘
                      └───────────────┘

---

Conclusion

Web Workers are one of the most underutilized browser APIs in the React ecosystem. The mental model shift from "everything runs on main thread" to "CPU-bound work belongs in workers" fundamentally changes how you architect performance-sensitive applications.

Start simple:

1. Identify your expensive operations (React DevTools Profiler, Performance tab)
2. Extract one into a worker using Comlink
3. Measure the difference
4. Expand from there

The initial setup cost is minimal. The payoff—applications that remain responsive regardless of data size—is substantial.

---

Further Reading

• Comlink GitHub - Google's worker abstraction
• Partytown - Move third-party scripts to workers
• Web Workers API (MDN)
• SharedArrayBuffer and Atomics
• OffscreenCanvas - Canvas operations in workers