README
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
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 (): Workerinput
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.