react-hooks-worker

React custom hooks for web workers

Usage no npm install needed!

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

README

react-hooks-worker

CI npm size

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

Parcel

Parcel allow your Web Worker script to be automatically bundled.

Rollup

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