.svg)
.svg)
The data we render on a UI originates from different sources like databases, APIs, files, and more. In React applications, when the data is received, we first store it in state and then pass it to the other components in multiple ways for rendering.
But most of the time, the format of the data is inconvenient for the rendering component. So, we have to format data and perform some prior calculations before we give it to the rendering component.
Sending data directly to the rendering component and processing the data inside that component is not recommended. Not only data processing but also any heavy background jobs that we would have to depend on the backend can now be done on the client-side because React allows the holding of business logic on the front-end.
A good practice is to create a separate function for processing that data which is isolated from the rendering logic, so that data processing and data representation will be done separately.
Why? There are two possible reasons:
- The processed data can be shared/used by other components, too.
- The main reason to avoid this is: if the data processing is a time-consuming task, you will see some lag on the UI, or in the worst-case scenario, sometimes the page may become unresponsive.
As JavaScript is a single-threaded environment, it has only one call stack to execute scripts (in a simple way, you cannot run more than one script at the same time).
For example, suppose you have to do some DOM manipulations and, at the same time, want to do some complex calculations. You can not perform these two operations in parallel. If the JavaScript engine is busy computing the complex computation, then all the other tasks like event listeners and rendering callbacks will get blocked for that amount of time, and the page may become unresponsive.
Though JavaScript is single-threaded, many developers mimic the concurrency with the help of timer functions and event handlers. Like by breaking heavy (time-consuming) tasks into tiny chunks and by using the timers you can split their execution. Let’s take a look at the following example.
Here, the processDataArray function uses the timer function to split the execution, which internally uses the setTimeout method for processing some items of array, again after a dedicated time passed execute more items, once all the array elements have been processed, send the processed result back by using the finishCallback.
| const processDataArray = (dataArray, finishCallback) => { | |
| // take a new copy of array | |
| const todo = dataArray.concat(); | |
| // to store each processed data | |
| let result = []; | |
| // timer function | |
| const timedProcessing = () => { | |
| const start = +new Date(); | |
| do { | |
| // process each data item and store it's result | |
| const singleResult = processSingleData(todo.shift()); | |
| result.push(singleResult); | |
| // check if todo has something to process and the time difference must not be greater than 50 | |
| } while (todo.length > 0 && +new Date() - start < 50); | |
| // check for remaining items to process | |
| if (todo.length > 0) { | |
| setTimeout(timedProcessing, 25); | |
| } else { | |
| // finished with all the items, initiate finish callback | |
| finishCallback(result); | |
| } | |
| }; | |
| setTimeout(timedProcessing, 25); | |
| }; | |
| const processSingleData = data => { | |
| // process data | |
| return processedData; | |
| }; |
You can find more about how JavaScript timers work internally here.
The problem is not solved yet, and the main thread is still busy in the computation so you can see the delay in the UI events like button clicks or mouse scroll. This is a bad user experience when you have a big array computation going on and an impatient web user.
The better and real multithreading way to solve this problem and to run multiple scripts in parallel is by using Web Workers.
Web Workers provide a mechanism to spawn a separate script in the background. Where you can do any type of calculations without disturbing the UI. Web Workers run outside the context of the HTML document’s script, making it easiest to allow concurrent execution of JavaScript programs. You can experience multithreading behavior while using Web Workers.
Communication between the page (main thread) and the worker happens using a simple mechanism. They can send messages to each other using the postMessage method, and they can receive the messages using onmessage callback function. Let's take a look at a simple example:
In this example, we will delegate the work of multiplying all the numbers in an array to a Web Worker, and the Web Worker returns the result back to the main thread.
| import "./App.css"; | |
| import { useEffect, useState } from "react"; | |
| function App() { | |
| // This will load and execute the worker.js script in the background. | |
| const [webworker] = useState(new window.Worker("worker.js")); | |
| const [result, setResult] = useState("Calculating...."); | |
| useEffect(() => { | |
| const message = { multiply: { array: new Array(1000).fill(2) } }; | |
| webworker.postMessage(message); | |
| webworker.onerror = () => { | |
| setResult("Error"); | |
| }; | |
| webworker.onmessage = (e) => { | |
| if (e.data) { | |
| setResult(e.data.result); | |
| } else { | |
| setResult("Error"); | |
| } | |
| }; | |
| }, []); | |
| useEffect(() => { | |
| return () => { | |
| webworker.terminate(); | |
| }; | |
| }, []); | |
| return ( | |
| <div className="App"> | |
| <h1>Webworker Example In React</h1> | |
| <header className="App-header"> | |
| <h1>Multiplication Of large array</h1> | |
| <h2>Result: {result}</h2> | |
| </header> | |
| </div> | |
| ); | |
| } | |
| export default App; |
| onmessage = (e) => { | |
| const { multiply } = e.data; | |
| // check data is correctly framed | |
| if (multiply && multiply.array.length) { | |
| // intentionally delay the execution | |
| setTimeout(() => { | |
| // this post back the result to the page | |
| postMessage({ | |
| result: multiply.array.reduce( | |
| (firstItem, secondItem) => firstItem * secondItem | |
| ), | |
| }); | |
| }, 2000); | |
| } else { | |
| postMessage({ result: 0 }); | |
| } | |
| }; |
If the worker script throws an exception, you can handle it by attaching a callback function to the onerror property of the worker in the App.js script.
From the main thread, you can terminate the worker immediately if you want by using the worker’s terminate method. Once the worker is terminated, the worker variable becomes undefined. You need to create another instance if needed.
You can find a working example here.
Charting middleware – Suppose you have to design a dashboard that represents the analytics of businesses engagement for a business retention application by means of a pivot table, pie charts, and bar charts. It involves heavy processing of data to convert it to the expected format of a table, pie chart, a bar chart. This may result in the UI failing to update, freezing, or the page becoming unresponsive because of single-threaded behavior. Here, we can use Web Workers and delegate the processing logic to it. So that the main thread is always available to handle other UI events.
- Emulating excel functionality – For example, if you have thousands of rows in the spreadsheet and each one of them needs some calculations (longer), you can write custom functions containing the processing logic and put them in the WebWorker’s script.
- Real-time text analyzer – This is another good example where we can use WebWorker to show the word count, characters count, repeated word count, etc., by analyzing the text typed by the user in real-time. With a traditional implementation, you may experience performance issues as the text size grows, but this can be optimized by using WebWorkers.
Yes, Web Workers are amazing and quite simple to use, but as the WebWorker is a separate thread, it does not have access to the window object, document object, and parent object. And we can not pass functions through postmessage.
But Web Workers have access to:
- Navigator object
- Location object (read-only)
- XMLHttpRequest
- setTimeout, setInterval, clearTimeout, clearInterval
- You can import other scripts in WebWorker using the importScripts() method
Here are some other types of workers:
- Shared Worker
- Service Worker
- Audio Worklet
Web Workers make our life easier by doing jobs in parallel in the background, but Web Workers are relatively heavy-weight and come with high startup performance cost and a high per-instance memory cost, so as per the WHATWG community, they are not intended to be used in large numbers.
Did you like the blog? If yes, we're sure you'll also like to work with the people who write them - our best-in-class engineering team.
We're looking for talented developers who are passionate about new emerging technologies. If that's you, get in touch with us.
The data we render on a UI originates from different sources like databases, APIs, files, and more. In React applications, when the data is received, we first store it in state and then pass it to the other components in multiple ways for rendering.
But most of the time, the format of the data is inconvenient for the rendering component. So, we have to format data and perform some prior calculations before we give it to the rendering component.
Sending data directly to the rendering component and processing the data inside that component is not recommended. Not only data processing but also any heavy background jobs that we would have to depend on the backend can now be done on the client-side because React allows the holding of business logic on the front-end.
A good practice is to create a separate function for processing that data which is isolated from the rendering logic, so that data processing and data representation will be done separately.
Why? There are two possible reasons:
- The processed data can be shared/used by other components, too.
- The main reason to avoid this is: if the data processing is a time-consuming task, you will see some lag on the UI, or in the worst-case scenario, sometimes the page may become unresponsive.
As JavaScript is a single-threaded environment, it has only one call stack to execute scripts (in a simple way, you cannot run more than one script at the same time).
For example, suppose you have to do some DOM manipulations and, at the same time, want to do some complex calculations. You can not perform these two operations in parallel. If the JavaScript engine is busy computing the complex computation, then all the other tasks like event listeners and rendering callbacks will get blocked for that amount of time, and the page may become unresponsive.
Though JavaScript is single-threaded, many developers mimic the concurrency with the help of timer functions and event handlers. Like by breaking heavy (time-consuming) tasks into tiny chunks and by using the timers you can split their execution. Let’s take a look at the following example.
Here, the processDataArray function uses the timer function to split the execution, which internally uses the setTimeout method for processing some items of array, again after a dedicated time passed execute more items, once all the array elements have been processed, send the processed result back by using the finishCallback.
You can find more about how JavaScript timers work internally here.
The problem is not solved yet, and the main thread is still busy in the computation so you can see the delay in the UI events like button clicks or mouse scroll. This is a bad user experience when you have a big array computation going on and an impatient web user.
The better and real multithreading way to solve this problem and to run multiple scripts in parallel is by using Web Workers.
Web Workers provide a mechanism to spawn a separate script in the background. Where you can do any type of calculations without disturbing the UI. Web Workers run outside the context of the HTML document’s script, making it easiest to allow concurrent execution of JavaScript programs. You can experience multithreading behavior while using Web Workers.
Communication between the page (main thread) and the worker happens using a simple mechanism. They can send messages to each other using the postMessage method, and they can receive the messages using onmessage callback function. Let's take a look at a simple example:
In this example, we will delegate the work of multiplying all the numbers in an array to a Web Worker, and the Web Worker returns the result back to the main thread.
If the worker script throws an exception, you can handle it by attaching a callback function to the onerror property of the worker in the App.js script.
From the main thread, you can terminate the worker immediately if you want by using the worker’s terminate method. Once the worker is terminated, the worker variable becomes undefined. You need to create another instance if needed.
You can find a working example here.
Charting middleware – Suppose you have to design a dashboard that represents the analytics of businesses engagement for a business retention application by means of a pivot table, pie charts, and bar charts. It involves heavy processing of data to convert it to the expected format of a table, pie chart, a bar chart. This may result in the UI failing to update, freezing, or the page becoming unresponsive because of single-threaded behavior. Here, we can use Web Workers and delegate the processing logic to it. So that the main thread is always available to handle other UI events.
- Emulating excel functionality – For example, if you have thousands of rows in the spreadsheet and each one of them needs some calculations (longer), you can write custom functions containing the processing logic and put them in the WebWorker’s script.
- Real-time text analyzer – This is another good example where we can use WebWorker to show the word count, characters count, repeated word count, etc., by analyzing the text typed by the user in real-time. With a traditional implementation, you may experience performance issues as the text size grows, but this can be optimized by using WebWorkers.
Yes, Web Workers are amazing and quite simple to use, but as the WebWorker is a separate thread, it does not have access to the window object, document object, and parent object. And we can not pass functions through postmessage.
But Web Workers have access to:
- Navigator object
- Location object (read-only)
- XMLHttpRequest
- setTimeout, setInterval, clearTimeout, clearInterval
- You can import other scripts in WebWorker using the importScripts() method
Here are some other types of workers:
- Shared Worker
- Service Worker
- Audio Worklet
Web Workers make our life easier by doing jobs in parallel in the background, but Web Workers are relatively heavy-weight and come with high startup performance cost and a high per-instance memory cost, so as per the WHATWG community, they are not intended to be used in large numbers.
.svg)
.svg)
