Understanding web workers in React.js is entirely dependent on the idea of JavaScript’s code execution. So, before you begin, you should understand how JavaScript code is executed.
JavaScript is single-threaded in nature. That is when one code thread completes its execution, the next one starts, and so on. This eventually leads to long delays and procedures becoming stalled. If one of the several threads has to be performed as soon as possible because subsequent processes rely on it, the app's performance will suffer as a result. This is where web workers come into play to alleviate such difficulties.
Web workers offer multi-threaded capability in JavaScript development. Furthermore, it removes the need for extended delays for process execution, making the app's performance quicker and smoother.
C#, Java, C++, and Emerald are some examples that offer parallel programming features and contribute to smoother functionality.
Planning to hire dedicated React developers for your project?
Let’s learn how to use web workers in React.js
What is a Web Worker?
A Web Worker is a feature of React.js that allows JavaScript code to execute in a separate background thread, freeing up the main thread to handle user interactions and refresh the UI.
Web Workers are commonly used to perform computationally intensive tasks such as image processing or complex calculations, without blocking the user interface.
In React, Web Workers can be created using the Worker API, which is a standard API provided by modern browsers. The Worker API allows you to create a new Web Worker instance from a JavaScript file, which can then be used to execute code in a separate thread.
To use a Web Worker in React, you typically create a new Worker instance in your component's componentDidMount lifecycle method, passing in the path to the JavaScript file that contains the worker code.
You can then send messages to the worker using the postMessage method and receive messages back from the worker using theonmessageevent handler.
Read More: React Element vs Component: A deep dive into differences
How a "Web Worker API" interacts between the main thread and the worker thread?
Communication between the worker thread and the main thread occurs via the Web Workers API in the following way.
Step – 1: Work instance initiation and passing the path of a worker script..
Step – 2: The main thread will use postMessage() to deliver a message for connection initiation, while the worker thread will wait for that message using onmessage ().
Step – 3: When the worker thread delivers a message usingpostMessage, the main thread will receive a message usingonmessage.
Step – 4: In the event of an error, there is an instance named oneerrorcall-back. It will capture errors from the worker thread.
Looking for the best custom software development company?
How to use Web workers in React.js?
Let’s understand web workers practically with an example.
Here, we will create a new Web Worker instance in our component’s constructor, passing the path to the App.js file. We then listen for messages from the worker in the handleCalculate method and send a message to the worker when the component is mounted using the postMessage method.
First, we will create a loop executer for num, then we will pass the number in the input field, and on the button click we will iterate the loop. On the iteration, we will display the calculated number message loaded on the page. Web Workers is an attempt to bring multi-threaded behavior to JavaScript.
App.js
import React from 'react'
import { Component } from 'react'
class App extends Component {
constructor() {
super()
this.state = {
num: '',
result: '',
loadingMessage: ''
}
this.handleCount = this.handleCount.bind(this)
this.handleCalculate = this.handleCalculate.bind(this)
}
handleCount(e) {
this.setState({
num: e.target.value
})
}
handleCalculate() {
const { num } = this.state
let result = 0;
for (let i = 1; i <= num; i++) {
this.setState({
loadingMessage: `Loaded ${i} / ${num}`
})
for (let j = 0; j < i; j++) {
result++
}
}
this.setState({
result
})
}
render() {
return (
<div>
<input type="number" value="{this.state.num}" onchange="{this.handleCount}">
<br> <br>
<button onclick="{this.handleCalculate}">Calculate</button>
<h1>{this.state.loadingMessage}</h1>
<h1>{this.state.result}</h1>
</div>
)
}
}
export default App
Read More: 11 Reasons Why React.js is Still Popular in 2023?
We've used a number for the input box and a loadingMessage to display previously loaded numbers. When we enter a small range, it will show normally without interrupting the page's Interface. The result is as follows:
But, when we input a lengthy value for the iterating loop, the page UI is blocked. After a while, the page will stop responding. Here, we placed 500000000 into the text field; after a while, it will display the unresponsive page option. The result is shown below.
Searching for top-rated VSTO Add-in development solutions? Your search ends here.
Now, we are going to do the same task using the web worker.
App.js
import React from 'react'
import { Component } from 'react'
import workerScript from './Worker'
import React from 'react'
import { Component } from 'react'
import workerScript from './Worker'
class App extends Component {
constructor() {
super()
this.state = {
num: '',
result: '',
loadingMessage: ''
}
this.handleCount = this.handleCount.bind(this)
this.handleCalculate = this.handleCalculate.bind(this)
}
componentDidMount() {
this.worker = new Worker(workerScript)
this.worker.addEventListener('message', e => {
const type = e.data.type;
if (type === 'loading') {
const { i, num } = e.data;
this.setState({
loadingMessage: `Loaded ${i} / ${num}`
})
}
else {
const { result } = e.data;
this.setState({
result
})
}
})
}
handleCount(e) {
this.setState({
num: e.target.value
})
}
handleCalculate() {
const { num } = this.state
this.worker.postMessage(num)
}
render() {
return (
<div>
<input type="number" value="{this.state.num}" onchange="{this.handleCount}">
<br> <br>
<button onclick="{this.handleCalculate}">Calculate</button>
<h1>{this.state.loadingMessage}</h1>
<h1>{this.state.result}</h1>
</div>
)
}
}
export default App
In this app component, we have imported the worker component and in the calculate method, we pass the number from the worker.js file. Whatever login we wrote on the button click event before the worker, we must now implement it in the worker file.
Worker.js
const loopworker = () => {
onmessage = (e) => {
const num = e.data;
let result = 0;
for (let i = 1; i <= num; i++) {
const data = { type: 'loading', i, num }
postMessage(JSON.parse(JSON.stringify(data)))
for (let j = 0; j < i; j++) {
result++;
}
}
const data = {
type: 'result',
result
}
postMessage(JSON.parse(JSON.stringify(data)))
}
}
let code = loopworker.toString()
code = code.substring(code.indexOf("{") + 1, code.lastIndexOf("}"))
const blob = new Blob([code], { type: 'application/javascriptssky' })
const workerScript = URL.createObjectURL(blob)
module.exports = workerScript;
Read More: Office 365 Add-ins development with React.js: Business benefits and practices for 2023
Let’s understand some of the crucial keywords that we used above.
Self:
Here, 'self' is guaranteed to link to a ServiceWorkerGlobalScope that contains attributes like clients, registrations or caches, and other event handlers. Nonetheless, it adheres to the same dynamic binding rules as the rest of the JavaScript environment. It doesn't matter if you remember it all the time, but use self when you wish to expressly refer to the global context.
e.data:
Any values passed from the app component will be accessed in the e.dataobject.
PostMessage:
To communicate with workers, the postMessage is used.
This brings us to the end of this blog. We hope you found this React.js tutorial useful. Please check our blog for more articles like this.
Conclusion
Web Workers in React is an important topic for React developers since it allows them to run multi-threaded programs. Understanding web workers in React.js is solely based on the JavaScript code execution concept. Hence, before you start, you should grasp how JavaScript code works. JavaScript is a single-threaded language. Web workers enable multi-threaded JavaScript programming. Additionally, it eliminates the need for lengthy pauses in process execution, resulting in faster and smoother app performance.
This blog has covered the fundamentals of web workers, how their API communicates with the main thread and worker thread, and a practical demonstration of how to use web workers with React.js.
Top comments (0)