Exploring Web Workers in React with Vite: The Key for Better Performance
Tags: react, javascript, webdev, tutorial
Published: 2023-01-08 19:16:32

## 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](https://github.com/GoogleChromeLabs/comlink) library.

### Project Setup

Run the following command in a terminal:

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

Now we can install the necessary dependencies:

```sh
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:

```js
// @/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:

```js
// @/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.

```js
// @/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)`.

```js
// @/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`.

```js
// @/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.

```js
// @/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:

```js
// @/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.

```js
// @/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:

![gif](https://res.cloudinary.com/dj5iihhqv/image/upload/v1668619191/2022-11-16_at_17.18.45_-_Amber_Coyote-min_fwa0xy.gif)

### 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](https://github.com/FranciscoMendes10866/react-vite-comlink)**