Unlocking the Power of Web Workers with React and TypeScript

What are Web Workers?

A web worker is a JavaScript process that runs in the background of a webpage. By default, JavaScript is single-threaded, but web workers enable developers to achieve multi-threading, or true concurrency. Web workers cannot access and manipulate the DOM, but they can perform I/O using XMLHttpRequest or Fetch.

Setting up a React and TypeScript Web Worker Project

To get started, create a new folder and set up a React and TypeScript project using the following code:

npm init -y
npm install react react-dom typescript @types/react @types/react-dom

Create a new file called tsconfig.json and add the following configuration:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "build"
  }
}

Preparing the TypeScript Data

Create a new file called data/index.ts and add a long array of objects:

export const data = Array.from({ length: 5000 }, (_, i) => ({
  id: i,
  name: `Item ${i}`,
  description: `This is item ${i}`,
}));

Creating Enums

Enums define a set of named constants. Create a new file called longProcesses/enums.ts and add the following enums:

export enum ProcessList {
  COUNT,
  GET_DATA,
}

export enum ProfileEnum {
  ID,
  NAME,
  DESCRIPTION,
}

Building App.ts and Generate Types

Create a new file called App.ts and add the following code:

import * as React from 'react';
import { data } from './data/index';
import { ProcessList, ProfileEnum } from './longProcesses/enums';

interface LengthCountType {
  loading: boolean;
  value: number;
}

interface ProfileType {
  id: number;
  name: string;
  description: string;
}