From the course: React: Web Workers

Advanced concurrency patterns - React.js Tutorial

From the course: React: Web Workers

Start my 1-month free trial Buy for my team

Advanced concurrency patterns

“

- [Instructor] Now we'll explore advanced patterns that unlock new levels of control and optimization, the scatter/gather pattern. Imagine a large dataset distributed across multiple servers or databases. The scatter/gather pattern empowers you to process this data in parallel across web workers in your React application. Scatter phase. The main thread divides the data into smaller chunks. Each chunk is sent to a separate web worker. Gather phase. Each web worker processes its assigned data chunk. Process results are sent back to the main thread. The main thread gathers and combines the results from all web workers. Let's look at this example. Your backend server is sending you a large report dataset. First, the large dataset from the server is broken down into smaller chunks using the splitLargeData function. The reason for this is to divide the workload into manageable parts, making it easier to process in parallel. The scatterGather function is responsible for distributing these chunks of data to multiple web workers. Each worker sends back its process data to the main thread once it's done. After receiving the result, the worker is returned to the pool to be used again for another data chunk, ensuring that workers are reused efficiently, and creating a promise for each chunk of data that a worker is processing. A promise ensures that once the worker completes its task, the result is returned and can be further processed. When all the workers finish, the promises are resolved. When all the chunks have been processed by the workers, the results are combined using the combineResults function, producing a final processed data set. This function is triggered when the user clicks a button in the UI. It calls the scatterGather function and waits for the final result. The number of workers created depends on the device's CPU power, and once all the data is processed, the result is logged. If any error occurs, it's caught and handled. The work-stealing pattern. Imagine a scenario with multiple web workers processing tasks of varying complexity. Some workers might finish their tasks faster, leading to idle resources. The work-stealing pattern tackles this by enabling efficient load-balancing. Idle workers steal tasks from busy workers, ensuring all workers are utilized effectively. This involves communication and coordination between them. Some of the benefits of the work-stealing pattern included, balancing workloads, the pattern ensures all web workers are actively processing tasks. Handling scenarios, where task complexities are unknown in advance, allowing for dynamic adjustments. By understanding these advanced concurrency patterns, you can tackle complex multi-threaded scenarios, optimize parallel processing in React applications, and achieve significant performance improvements. Remember, the choice of pattern depends on your specific use case and data processing requirements.

Contents