ReactJs Performance ~ Web Workers for Heavy Computations ~

JavaScript runs on a single thread, which means intensive tasks can freeze the UI and hurt the user experience.

To avoid this, you can offload heavy work to background threads using Web Workers.

🔧 When Web Workers are useful

• Processing images or videos in the browser
• Handling large datasets (sorting, filtering, transformations)
• Performing CPU-heavy calculations (e.g. simulations, analytics)
• Parsing large files like CSV, JSON, or XML
• Running cryptographic or hashing operations
• Managing real-time data streams without blocking the UI

Web Worker implementation example

// dataWorker.js
self.addEventListener('message', event => {
  const { items, taskType } = event.data;

  const output = runBackgroundTask(items, taskType);

  self.postMessage({
    status: 'completed',
    result: output,
  });
});

function runBackgroundTask(items, taskType) {
  if (taskType !== 'transform') {
    return items;
  }

  return items.map(item => {
    return applyHeavyTransformation(item);
  });
}

function applyHeavyTransformation(item) {
  // Put CPU-heavy logic here
  return {
    ...item,
    processed: true,
  };
}

// DataProcessor.jsx
import { useEffect, useState } from 'react';

function DataProcessor({ items }) {
  const [result, setResult] = useState([]);
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    const backgroundWorker = new Worker(
      new URL('./dataWorker.js', import.meta.url)
    );

    backgroundWorker.addEventListener('message', event => {
      setResult(event.data.result);
      setIsRunning(false);
    });

    setIsRunning(true);

    backgroundWorker.postMessage({
      items,
      taskType: 'transform',
    });

    return () => {
      backgroundWorker.terminate();
    };
  }, [items]);

  if (isRunning) {
    return <LoadingIndicator />;
  }

  return <DataVisualization data={result} />;
}

In this example, the expensive transformation is moved outside the main React rendering flow.

The component sends raw data to the worker, waits for the processed result, and keeps the UI responsive while the task runs in the background.

Performance Comparison by Task Type

Task	Main Thread	Worker Thread	UI Smoothness	Implementation Difficulty
Image filtering	~800ms (blocks execution)	~850ms (runs off the main thread)	Maintains 60 FPS	Moderate
Data sorting (100k items)	~450ms (blocking)	~480ms (non-blocking)	Maintains 60 FPS	Low
JSON parsing (large payload)	~600ms (causes freeze)	~620ms (handled in background)	Maintains 60 FPS	Low
Physics simulations	~1200ms (UI freeze)	~1250ms (processed asynchronously)	Maintains 60 FPS	High
Cryptographic operations	~350ms (blocking)	~360ms (keeps UI responsive)	Maintains 60 FPS	Moderate
Video transcoding	Not feasible (too heavy)	Executed in background	Maintains 60 FPS	Very High

⚠️ Things to know before using Web Workers

While Web Workers are powerful, they come with a few trade-offs:

• They cannot directly interact with the DOM
• Memory is isolated from the main thread (SharedArrayBuffer is an advanced workaround)
• Communication between threads introduces latency (~5–10ms per message)
• Data must be serialized/deserialized when passing between threads

---

🧠 When should you actually use them?

A good rule of thumb:

If a task takes longer than ~50ms, it's a good candidate for a Web Worker.

For shorter operations, the cost of message passing can outweigh the performance gains.

In those cases, you might be better off using:

• requestIdleCallback → to run tasks when the browser is idle
• Simple async patterns → to avoid blocking rendering

---

🛠️ Modern tooling makes it easier

Today’s tooling significantly reduces the complexity of working with Web Workers:

• Vite / Webpack → allow direct worker imports with minimal setup
• Comlink → abstracts message passing into a simple function-call-like API

These tools make it much easier to integrate background processing into modern frontend applications without dealing with low-level boilerplate.

---

💡 Practical perspective

Use Web Workers selectively.

They shine in CPU-heavy scenarios, but for lightweight tasks, simpler approaches often lead to better overall performance and maintainability.