The Journey of #100DaysOfCode (@sourabhbagrecha)

About the Community The Treehouse
90

#Day84 of 100daysofcode

Since I have been learning about React App’s performance for a few days, I can not conclude this without mentioning Web Workers.

Web Workers are a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface.

It’s obvious how this Web Worker API can help us in increasing our App’s performance.

Let’s see this in action:
In this example, we are going to use the Workerize package to ensure that we are offloading these heavy calculations that are not directly responsible for Browser’s UI paint process.

Previously we were importing the heavy function directly into our component like this:

import {getItems} from '../filter-cities'

But the above is not utilizing the Web Worker to execute.

We can create a new layer over the ../filter-cities file which will be Workerizing this function:

//FileName: workerized-filter-cities.js
import makeFilterCitiesWorker from 'workerize!./filter-cities'

const {getItems} = makeFilterCitiesWorker()

export {getItems}

And then we will use the above file to consume a getItems function that is utilizing the Web Worker in our component in the following manner:

import {getItems} from '../workerized-filter-cities'
4 Likes