Exploring Web Workers in React with Vite: The Key for Better Performance

Introduction

Web Workers are a powerful and flexible tool that can enhance the functionality of your application. In this article, we will explore how to incorporate a Web Worker into a React application and compare the performance of an expensive function when it is executed in the main thread versus in a Web Worker.

By the end of this tutorial, you will have a better understanding of how Web Workers can improve the performance of your React app.

Assumed knowledge

The following would be helpful to have:

• Basic knowledge of React
• Basic knowledge of Web Workers

Getting Started

To streamline the process of configuring the Web Worker and simplify communication between the app and the Web Worker, we will be using the comlink library.

Project Setup

Run the following command in a terminal:

yarn create vite app-sw --template react-ts
cd app-sw

Now we can install the necessary dependencies:

yarn install comlink
yarn install -D vite-plugin-comlink

The first change to be made is in vite.config.ts where we are going to import the comlink plugin and add it to the vite configuration:

// @/vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { comlink } from "vite-plugin-comlink";

export default defineConfig({
  plugins: [react(), comlink()],
  worker: {
    plugins: [comlink()],
  },
});

The next step is to go to vite-env.d.ts and add the reference to the vite plugin we installed:

// @/src/vite-env.d.ts

/// <reference types="vite/client" />
/// <reference types="vite-plugin-comlink/client" /> 👈 added this

Next, we'll create a file called utils.ts and define two functions inside it. The first function, called blockingFunc(), will be computationally expensive and will easily block the main thread.

// @/src/utils.ts

export const blockingFunc = () => {
  new Array(100_000_000)
    .map((elm, index) => elm + index)
    .reduce((acc, cur) => acc + cur, 0);
};

// ...

The randomIntFromInterval() function generates a random integer within a specified range. For example, you might use this function to generate a random number between 1 and 10, like so: randomIntFromInterval(1, 10).

// @/src/utils.ts

export const blockingFunc = () => {
  new Array(100_000_000)
    .map((elm, index) => elm + index)
    .reduce((acc, cur) => acc + cur, 0);
};

export const randomIntFromInterval = (min: number, max: number): number => {
  return Math.floor(Math.random() * (max - min + 1) + min);
};

// ...

Still in this file, we will create the instance of the web worker that will be used in the app, which we will name workerInstance.

// @/src/utils.ts

export const blockingFunc = () => {
  new Array(100_000_000)
    .map((elm, index) => elm + index)
    .reduce((acc, cur) => acc + cur, 0);
};

export const randomIntFromInterval = (min: number, max: number): number => {
  return Math.floor(Math.random() * (max - min + 1) + min);
};

// worker instance
export const workerInstance = new ComlinkWorker<typeof import("./sw/worker")>(
  new URL("./sw/worker", import.meta.url)
);

Before we can use workerInstance, we need to define our worker. As shown in the previous code snippet, let's create a folder called sw/ and a file called worker.ts inside it.

// @/src/sw/worker.ts

/// <reference lib="webworker" />
declare const self: DedicatedWorkerGlobalScope;

import { blockingFunc } from "../utils";

export const someRPCFunc = () => {
  blockingFunc();
};

As you can see in the code snippet, the content inside it can be executed in the worker. We imported the blockingFunc() function as a named export called someRPCFunc().

What is someRPCFunc()? It's a method that can be remotely invoked through our worker instance using RPC (Remote Procedure Call), meaning it can be called from the main thread to the web worker.

Finally, we need to go to App.tsx to put everything we created to use. First, we need to import the necessary items:

// @/src/App.tsx
import { useCallback, useState } from "react";

import { workerInstance, blockingFunc, randomIntFromInterval } from "./utils";

// ...

Now, we'll define three functions that will serve as our callbacks. The first will utilize the web worker to call the costly function. The second will run the expensive function within the main thread. The third will generate a random number and save it in the component's state. Once these functions are defined, we can bind them to their respective buttons.

// @/src/App.tsx
import { useCallback, useState } from "react";

import { workerInstance, blockingFunc, randomIntFromInterval } from "./utils";

export const App = () => {
  const [random, setRandom] = useState<number>(0);

  const workerCall = useCallback(async () => {
    await workerInstance.someRPCFunc();
  }, []);

  const normalFuncCall = useCallback(() => {
    blockingFunc();
  }, []);

  const randomIntHandler = useCallback(() => {
    setRandom(randomIntFromInterval(1, 100));
  }, []);

  return (
    <section>
      <button onClick={workerCall}>Worker Call</button>
      <button onClick={normalFuncCall}>Main Thread Call</button>
      <button onClick={randomIntHandler}>Random Int {random}</button>
    </section>
  );
};

If you've been following along with the steps in the article, you should be able to achieve a result similar to this one:

Expected behavior

When executing on the main thread, there should be a slight lag with the interaction of the random number button. However, when executing in the web worker there shouldn't be any delay because the execution is done in a different thread.

Conclusion

I hope you found this article helpful, whether you're using the information in an existing project or just giving it a try for fun.

Please let me know if you notice any mistakes in the article by leaving a comment. And, if you'd like to see the source code for this article, you can find it on the github repository linked below.

Github Repo