react-worker-components

React Worker Components simplify using Web Workers

Introduction

This is an experimental project inspired by React Server Component.

I've been developing several libraries to interact with Web Workers.

• react-hooks-worker
• redux-in-worker
• react-suspense-worker

While they provide various interfaces with good abstraction, RSC style would be another approach which is useful for Web Workers.

RWC is a library to provide RSC-like interface for Web Workers. It serializes React elements keeping their referential identities as much as possible. If a React component is "registered", it will be referenced by string names, and it can be used at the both ends.

Project Status: Experimental but basic examples are working. Welcome to try realistic examples.

Install

npm install react-worker-components

Usage

TextBox.js

This is a component that can be used in the RWC tree. register is important to enable serialization.

import React, { useState } from 'react';

import { register } from 'react-worker-components';

export const TextBox = () => {
  const [text, setText] = useState('');
  return (
    <div>
      <span>Text: {text}</span>
      <input value={text} onChange={(event) => setText(event.target.value)} />
    </div>
  );
};

register(TextBox, 'TextBox');

Hello.worker.js

This is a component that runs only on web workers. expose is necessary to communicate with the main thread.

import React from 'react';

import { expose } from 'react-worker-components';

import { TextBox } from './TextBox';

const fib = (i) => (i <= 1 ? i : fib(i - 1) + fib(i - 2));

const Hello = ({ count, children }) => {
  const fibNum = fib(count);
  return (
    <div>
      <div>Hello from worker: {fibNum}</div>
      <h1>Main TextBox</h1>
      {children}
      <h1>Worker TextBox</h1>
      <TextBox />
    </div>
  );
};

expose(Hello);

App.js

This is the entry point component in the main thread. wrap is to communicate with the worker thread.

import React, { Suspense, useState } from 'react';

import { wrap } from 'react-worker-components';

import { TextBox } from './TextBox';

const Hello = wrap(() => new Worker(new URL('./Hello.worker', import.meta.url)));

export const App = () => {
  const [count, setCount] = useState(1);
  return (
    <div>
      <span>Count: {count}</span>
      <button type="button" onClick={() => setCount(count + 1)}>+1</button>
      <button type="button" onClick={() => setCount((c) => c - 1)}>-1</button>
      <Suspense fallback="Loading...">
        <Hello count={count}>
          <TextBox />
        </Hello>
      </Suspense>
    </div>
  );
};

API

expose

Expose a React function component from web workers.

Parameters

• Component React.FC<Props>
• key string?

Examples

// foo.worker.js
import { expose } from 'react-worker-components';

const Foo = () => {
  return <h1>Foo</h1>;
};

expose(Foo);

register

Register a component with a string name

This allows serializing components between main and worker threads.

Parameters

• component AnyComponent
• name string

Examples

import { register } from 'react-worker-components';

const Counter = () => {
  const [count, setCount] = useState(0);
  return <div>{count}<button onClick={() => setCount(1)}>1</button></div>;
};

register(Counter, 'Counter');

wrap

Wrap an exposed component in main thread

This will connect the component in the worker thread. Requires Suspense.

It will create a dedicated worker for each createWorker function reference.

Parameters

• createWorker any
• key string?

Examples

import { wrap } from 'react-worker-components';

const Foo = wrap(() => new Worker(new URL('./Foo.worker', import.meta.url)));

Examples

The examples folder contains working examples. You can run one of them with

PORT=8080 npm run examples:01_minimal

and open http://localhost:8080 in your web browser.