Using Web Workers in React Applications: Performance Optimization and Resource Management

In modern web applications, particularly in React, efficient utilization of browser resources is a key factor in ensuring responsiveness and performance. One of the tools that can aid in this is web workers. In this article, we'll explore why and how to use web workers in React applications, along with providing code examples.

Why Use Web Workers in React?

Before delving into implementation details, let's understand why web workers are needed in React applications.

Performance Optimization: Web workers enable the execution of computationally intensive tasks in separate threads without blocking the main browser thread. This enhances interface responsiveness and prevents slowdowns during complex operations.

Resource Management: Creating a web worker allows for more flexible management of application computations and resources. You can create and terminate web workers as needed, optimizing memory and CPU usage.

Examples of Using Web Workers in React

Processing Large Data Volumes: Web workers can be used for processing large data arrays or executing complex computations in the background. Let's consider an example of data processing using a web worker.

declare const self: Worker;
self.addEventListener("message", async (event: MessageEvent) => {
   const data = event.data // data that we pass inside the worker for subsequent processing
   const res = data... // our data processing logic
   self.postMessage(res);
});

export default {} as typeof Worker & { new (): Worker };

File Structure for Workers in the Project: It's good practice to store worker files in a separate folder. Note that each logical part creates a separate worker, stored in its own file.

Using a Worker within Components:

import React, { useEffect } from "react";
import NetworkBalancesWorker from "workers/NetworkBalances.worker";
import { FlexGap } from "components";
import { BalanceChart, DashboardTransactions, TotalBalanceChart } from "./components";
import { isErrorResult } from "services";
import { useAppDispatch } from "store/store";
import { setNetworkBalances } from "store/dashboard";
import { getDashboardWalletBalance } from "store/dashboard/actions";
import { ROUTES } from "navigation/routes";


const DashboardPage: React.FC = () => {
 const dispatch = useAppDispatch();
 useEffect(() => {
   const balancesWorker = new NetworkBalancesWorker();
   dispatch(getDashboardWalletBalance()).then(res => {
     if (!isErrorResult(res.payload)) {
       const payload = res.payload!;
       // transfer data for processing inside the worker
       balancesWorker.postMessage(payload);
     }
   });


   // subscribe to the results of calculations carried out inside the worker
   balancesWorker.onmessage = event => {
     const res = event.data; // data obtained after processing
     dispatch(setNetworkBalances(res));
   };
   return () => {
     // terminate the worker when unmounting the component
     balancesWorker.terminate();
   };
 }, []);

In this example, a web worker is created inside useEffect, into which data is passed for complex computations. Afterwards, we subscribe to the computation results and receive them back into the main thread, where they are displayed in the application.

Resource Optimization: Creating a web worker inside useEffect ensures it's instantiated only after component mounting, optimizing resource usage and preventing unnecessary operations.

Lifecycle Management: Using terminate() within useEffect ensures proper termination of the web worker upon component unmounting, avoiding memory leaks and other resource issues.

Conclusion

Employing web workers in React applications is a powerful tool for optimizing performance and enhancing user experience. Proper utilization and resource management of web workers help create fast, responsive, and robust applications.

Need assistance with your project or ideas?

Book a quick sync up with our CTO if you need a helping hand or visit our website:

PreviousMitek SDK: integration experience NextSmartling Guidelines: How to exclude something from translation

Last updated 8 months ago

declare const self: Worker; self.addEventListener("message", async (event: MessageEvent) => { const data = event.data // data that we pass inside the worker for subsequent processing const res = data... // our data processing logic self.postMessage(res); }); export default {} as typeof Worker & { new (): Worker };

import React, { useEffect } from "react"; import NetworkBalancesWorker from "workers/NetworkBalances.worker"; import { FlexGap } from "components"; import { BalanceChart, DashboardTransactions, TotalBalanceChart } from "./components"; import { isErrorResult } from "services"; import { useAppDispatch } from "store/store"; import { setNetworkBalances } from "store/dashboard"; import { getDashboardWalletBalance } from "store/dashboard/actions"; import { ROUTES } from "navigation/routes"; const DashboardPage: React.FC = () => { const dispatch = useAppDispatch(); useEffect(() => { const balancesWorker = new NetworkBalancesWorker(); dispatch(getDashboardWalletBalance()).then(res => { if (!isErrorResult(res.payload)) { const payload = res.payload!; // transfer data for processing inside the worker balancesWorker.postMessage(payload); } }); // subscribe to the results of calculations carried out inside the worker balancesWorker.onmessage = event => { const res = event.data; // data obtained after processing dispatch(setNetworkBalances(res)); }; return () => { // terminate the worker when unmounting the component balancesWorker.terminate(); }; }, []);