React WebWorker.

#frontend #javascript #performance #webdev

Optimizing Bulk Excel-like Table Updates Using Web Workers

Recently, I worked on improving the performance of a feature where users update large Excel-like table data (thousands of rows). Handling everything on the main thread was causing noticeable UI lag and freezing issues 😓

To solve this, I used Web Workers — and the results were a game changer.

Instead of processing heavy data updates on the main thread, I moved the logic into a Web Worker. This allowed the UI to stay smooth and responsive while the data processing happened in the background.

What I did:

Offloaded bulk row updates and transformations to a Web Worker
Used postMessage to send data between the main thread and worker
Processed large datasets (filtering, mapping, calculations) inside the worker
Sent back only the final processed result to update the UI

⚡ Result:

No more UI freezing
Smooth scrolling and interactions even with large datasets
Better user experience overall

When to use Web Workers?

Large data processing (Excel-like tables, reports)
Heavy computations
Parsing big JSON responses
Background tasks that shouldn’t block UI

Web Workers are super underrated when it comes to frontend performance optimization. If you're dealing with heavy data operations, they are definitely worth trying!

How Web Workers Work
Normally, JavaScript runs on a single main thread (UI thread).
So when you do heavy work (like updating thousands of rows), the UI gets blocked 😓
👉 Web Workers solve this by running code in a separate background thread
Flow:
-> Main thread creates a worker
-> Main thread sends data → worker.postMessage(data)
-> Worker processes heavy task
-> Worker sends result back → postMessage(result)
-> Main thread updates UI
-> So your UI stays smooth while heavy work runs in parallel
Main Thread (UI)
↓ send data
Web Worker (Background Processing)
↓ return result
Main Thread (Update UI)

Simple Implementation Demo

Create Worker File (worker.js) // worker.js self.onmessage = function (e) { const data = e.data; // Simulate heavy processing (Excel-like updates) const updatedData = data.map((row) => { return { ...row, total: row.price * row.quantity, }; });

// Send result back to main thread
self.postMessage(updatedData);
};

Use Worker in Your App // main.js (or React component) this should be initial component mounting state

const worker = new Worker(new URL('./worker.js', import.meta.url));

const tableData = [
{ id: 1, price: 100, quantity: 2 },
{ id: 2, price: 200, quantity: 3 },
// imagine 10,000+ rows
];

// Send data to worker
worker.postMessage(tableData);

// Receive processed data
worker.onmessage = function (e) {
const result = e.data;
console.log("Updated Data:", result);
};

React Example (Simple)
import { useEffect, useState } from "react";

function App() {
const [data, setData] = useState([]);

useEffect(() => {
const worker = new Worker(new URL("./worker.js", import.meta.url));

const bigData = Array.from({ length: 5000 }, (_, i) => ({
  id: i,
  price: Math.random() * 100,
  quantity: Math.random() * 5,
}));

worker.postMessage(bigData);

worker.onmessage = (e) => {
  setData(e.data);
};

return () => worker.terminate();

}, []);

return

Rows processed: {data.length};

}