Web Workers

Uploaded by

swaindouble345

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

25 views3 pages

Web Workers

Uploaded by

swaindouble345

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as TXT, PDF, TXT or read online on Scribd

You are on page 1/ 3

Web workers in ReactJs

#
website
#
performance
#
react
#
javascript
Have you ever faced a situation in which you are executing a block of code and it
is freezing the UI for a few seconds? If yes then you surely need a solution to
handle that block of code in the background.

In React we have a simple way to do these types of CPU-intensive processes in the

background with the help of web workers. First of all what a web worker is?

A web worker is a JavaScript feature that allows you to run scripts in the
background, separate from the main thread of your web page. This background
execution enables you to perform tasks concurrently without blocking the user
interface (UI) or causing it to become unresponsive. Web workers are particularly
useful for handling computationally intensive or time-consuming operations without
impacting the user's experience.

The use cases for a web worker are

Complex Calculations: Web workers are ideal for performing complex mathematical
calculations or data processing tasks without impacting the main thread.
Large Data Handling: When dealing with large datasets or files, web workers can
help process and parse the data in the background.
Background Services: Web workers can be used to run background services such as
periodic data synchronization or background notifications.
So, let's try to implement a web worker in a React application.

First, we create a react project, and then we use a service faker to create 25000
user records.
import { faker } from '@faker-js/faker';

export function fetchUsers() {

const users = [];

for (let i = 0; i < 25000; i++) {

let id = i + 1;
let name = faker.person.fullName();
let email = faker.internet.email();
let joinedOn = faker.date.recent();
let commentCount = faker.number.int({ min: 0, max: 100 });
let user = {
id,
name,
email,
joinedOn,
commentCount
};
users.push(user);
}
return Promise.resolve(users);
}
Now, our goal is to sort these records ascending and descending based on
"commentCount" by using a web worker.
So, first, we will create two files "src/app.worker.js" and "src/WebWorker.js".

In the "app.worker.js" file we will export an arrow function in which we will add
an event listener on the window object(self) to listen to the "message". This
"message" will be triggered from the UI with "users" and "type"(ascending or
descending" variables.
export default () => {
self.addEventListener('message', e => { // eslint-disable-line no-restricted-
globals
if (!e) return;
let { users, type } = e.data;

if(type === "asc") {

users = users.sort((a, b) => a.commentCount - b.commentCount);
} else {
users = users.sort((a, b) => b.commentCount - a.commentCount);
}

postMessage(users);
})
}
And we will sort it according to the "type" variable and return it by
"postMesssage" method.

And in the "WebWorker.js" we will export a class.

export default class WebWorker {
constructor(worker) {
const code = worker.toString();
const blob = new Blob(['('+code+')()']);
return new Worker(URL.createObjectURL(blob));
}
}
It will simply change the worker we defined in "app.worker.js" to an object URL.

Now, let's connect this webworker to the UI.

First we will import both the "worker" and "WebWorker" from the respective files.
import worker from './app.worker.js';
import WebWorker from './WebWorker';
Then, we will initialize the "WebWorker" with the argument "worker".
const webWorker = new WebWorker(worker);
First, we will work on the ascending logic. So, we will send the "users" and "type"
to the worker by the "postMessage" method on this web worker.
webWorker.postMessage({ users, type: "asc"});
Then, we will listen to the "message" and get the sorted data from the web worker
like this.
webWorker.addEventListener('message', (event) => {
const sortedList = event.data;

setUsers(sortedList);
});
Same logic we will add for the descending function as well.
webWorker.postMessage({ users, type: "desc"});
webWorker.addEventListener('message', (event) => {
const sortedList = event.data;

setUsers(sortedList);
});
So, now our sorting is working fine. But don't forget to terminate the web worker
at the time of component unmounting.
return () => {
webWorker.terminate()
}
So, finally, our application will look something like this.