react-worker-components

React Worker Components simplify using Web Workers

Usage no npm install needed!

<script type="module">
  import reactWorkerComponents from 'https://cdn.skypack.dev/react-worker-components';
</script>

README

react-worker-components

CI npm size discord

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.

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.