How to pass a web worker instance to another component in react js?

Web Workers run in an isolated thread. As a result, the code that they execute needs to be contained in a separate file. Because, the worker script runs in another script. To get started with Web Workers, you need to create a new Worker object in your main page.

// main.js file

var worker = new Worker("workerfile.js");

The Worker() constructor call creates a worker and returns a Worker object representing that worker, which is used to communicate with the worker. How do we communicate with a worker? By calling the postMessage() method.

// main.js file

worker.postMessage("Hello World");

In the workerfile.js file, we’d have something like this:

// workerfile.js

self.addEventListener(
  "message",
  function(e) {
    self.postMessage(e.data);
  },
  false
);

Finally, we will also need a message event listener in the main file to receive the data and act upon it. Something like the code block below.

// main.js file

    var worker = new Worker('workerfile.js');

    worker.addEventListener('message', function(e) {
      console.log('Message from Worker: ' + e.data);
    }

    worker.postMessage('Hello World');

You can create a new React app with the command below:

npx create-react-app react-worker

Install

npm install --save react-webworker

Using render props for ultimate flexibility:

import WebWorker from "react-webworker"

const MyComponent = () => (
  <WebWorker url="/worker.js">
    {({ data, error, postMessage }) => {
      if (error) return `Something went wrong: ${error.message}`
      if (data)
        return (
          <div>
            <strong>Received some data:</strong>
            
{JSON.stringify(data, null, 2)}
          </div>
        )
      return <button onClick={() => postMessage("hello")}>Hello</button>
    }}
  </WebWorker>
)

Using helper components (don't have to be direct children) for ease of use:

import WebWorker from "react-webworker"

const MyComponent = () => (
  <WebWorker url="/worker.js">
    <WebWorker.Pending>
      {({ postMessage }) => <button onClick={() => postMessage("hello")}>Hello</button>}
    </WebWorker.Pending>
    <WebWorker.Data>
      {data => (
        <div>
          <strong>Received some data:</strong>
          
{JSON.stringify(data, null, 2)}
        </div>
      )}
    </WebWorker.Data>
    <WebWorker.Error>{error => `Something went wrong: ${error.message}`}</WebWorker.Error>
  </WebWorker>
)

Parcel and worker-plugin allow your Web Worker script to be automatically bundled. However this only works when you create the Worker instance yourself, instead of having react-webworker do it for you. Here's how that works:

import WebWorker from "react-webworker"

const myWorker = new Worker("./worker.js") // relative path to the source file, not the public URL

const MyComponent = () => <WebWorker worker={myWorker}>...</WebWorker>

Using <WebWorker> with a Service Worker is as simple as passing it as a custom worker instance:

const MyComponent = () => <WebWorker worker={navigator.serviceWorker}>...</WebWorker>