Web Workers in React (Offloading Heavy Work)
Learn how to protect React’s rendering pipeline from CPU-heavy computation by moving expensive work off the main thread using Web Workers.
Most React performance issues are not caused by having too many components. They are caused by doing too much synchronous work at the wrong time. Imagine a dashboard that loads a large dataset and performs complex aggregation, a data table that sorts 50,000 rows on every filter change, a charting tool that recalculates geometry on each interaction, or an image-processing tool that compresses or transforms files before upload. These are not unrealistic edge cases. They are common in production systems.
At first, the feature works. Then something subtle happens. While the calculation runs, the UI freezes. Typing in an input stutters. Buttons feel unresponsive. Animations drop frames. Even a simple loading spinner fails to animate smoothly. The problem is not React reconciliation. The problem is that the browser’s main thread is blocked.
This is a crucial distinction. React 19 gives us transitions, Suspense, and scheduling to coordinate rendering priority. But none of those tools can help if JavaScript itself is monopolizing the main thread. If a loop runs for 400 milliseconds, React cannot render during that time. The browser cannot paint. Input cannot be processed. Scheduling only works when the thread is free. The root issue is architectural. Heavy computation and rendering are happening on the same thread, and they compete for the same resource. When computation wins, responsiveness loses.
Web Workers exist to solve this mismatch. They allow CPU-bound work to run on a separate thread. Instead of trying to optimize the loop first, the work can be isolated. Instead of fighting the main thread scheduler, the competition is removed.
The above diagram shows two parallel lanes. The main thread lane contains user input events, React rendering, and screen painting. The worker lane contains a heavy computation task. A message arrow sends input data to the worker. Another arrow returns computed results. The main thread remains free to process clicks and re-render while computation runs in parallel.
Separating computation from rendering with web workers
The browser runs React and your components on the main thread. That thread is responsible for:
Handling user input
Running JavaScript
Executing React’s render and commit phases
Painting the screen
When a long-running ...