Multi-Threading concept in React with Web-Worker
To answer my assignment for Product life Cycle, I decided to work on my React application, “World Clock”. I created a google form survey and asked a few of my friends to tell me any issues they faced while using my app. In result, I learned web worker to solve one of the problem informed by my friends that this app was having and that was lagging of clock hands.
To understand this, one need to know that java script is a single threaded programming language that means it allows only one operation to be performed at any given time. Some time we need to do multiple operations in the back-end like getting data using the api calls. I would try to explain how I used web worker to solve the problem of running multiple clocks simultaneously with web worker in one of the React application I built, with example.
Running multiple clocks require each clock to be able to proceed by one second, separately, and updating the corresponding hands on the each clock. Doing it on single thread causes the hands to lag while the current tab is not in focus. As in the following video you can see when you tab away from the application for example, for 5 minutes in this video, see how the clock try to make for the difference created by not running in the background. (Focus on last 3 seconds).
To handle this issue there is a solution available in java script, that is to use web workers. The main task of the web worker is to run the task in background even if the application is not in focus. Web worker allows creating multiple workers for the application (but it is not recommended for more than a few workers). Similar to the video above, focus on the last few seconds of the video below how it is different with the worker.
If you are new to this concept and understand what problem I was trying to define in the video above then you must be curious to know about how to use web worker. I will try to explain to the best of my own understanding.
First of all need to create a worker which will be executed when required(a new clock). For the example above it is as below:-
In this code the worker thread receives a message with the event listener and after processing it creates an Interval to update the clock with postMessage() method after one thousand milliseconds.
Now, in the clock JS file, we need to create a worker reference using the following code in the React class component.
and later in updateClock() method an event is subscribed to listen to the incoming message from the worker every second, to update the DOM, this is because DOM is not directly accessible from the worker itself.
In the end ,when application is closed or a clock is deleted, the above worker is required to be terminated which could be done as below:
componentWillUnmount(){
this.clock.terminate();
}I am not sure about one thing whether this is the best case scenario for using web worker but I was successfully able to solve the problem I encountered in my React project. I hope you learned something from reading this article. If you liked it please share and if you didn’t like it please provide feedback on how I could improve the explanation on this concept.
Thank You!
