react-hooks-worker

react-hooks-worker

React custom hooks for web workers.

Introduction

Web Workers are another thread from the main thread in browsers. We can run heavy computation in a separate thread so that users don't feel slowing down.

React provides a reactive system. This library hides the async nature of Web Workers with React custom hooks. Results returned by Web Workers are stored in a React local state.

Developers can implement a worker as:

• sync function
• async function
• sync generator function
• async generator function

Install

npm install react-hooks-worker

Usage

slow_fib.worker.js:

import { exposeWorker } from 'react-hooks-worker';

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

exposeWorker(fib);

app.js:

import React from 'react';

import { useWorker } from 'react-hooks-worker';

const createWorker = () => new Worker('./slow_fib.worker', { type: 'module' });

const CalcFib = ({ count }) => {
  const { result, error } = useWorker(createWorker, count);
  if (error) return <div>Error: {error}</div>;
  return <div>Result: {result}</div>;
};

const App = () => (
  <div>
    <CalcFib count={5} />
  </div>
);

Bundler support requirements

This library requires a bundler to recognize Web Worker properly. Not everything is tested, and we appreciate for your help. (So far, only tested with worker-plugin.)

Webpack

• worker-plugin :white_check_mark:
• worker-loader

Parcel

Parcel allow your Web Worker script to be automatically bundled.

Rollup

• rollup-plugin-off-main-thread
• rollup-plugin-web-worker-loader

API

exposeWorker

expose worker

You can expose any function that returns:

• A value
• A promise
• An iterable
• An async iterable

Parameters

• func function (data: any): any

Examples

import { exposeWorker } from 'react-hooks-worker';

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

exposeWorker(fib);

useWorker

use worker

The createWorker function should be stable to keep the worker running. If it's referentially changed, it will create a new worker and terminate the old one.

Parameters

• createWorker function (): Worker
• input any

Examples

import { useWorker } from 'react-hooks-worker';

const createWorker = () => new Worker('./slow_fib.worker', { type: 'module' });

const CalcFib = ({ count }) => {
  const { result, error } = useWorker(createWorker, count);
  if (error) return <div>Error: {error}</div>;
  return <div>Result: {result}</div>;
};

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.

Blogs

• Playing with React Hooks and Web Workers
• How I Developed React Hooks for Web Workers