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
Parcel
Parcel allow your Web Worker script to be automatically bundled.
Rollup
Examples
The examples folder contains working examples. You can run one of them with
PORT=8080 npm run examples:minimal
and open http://localhost:8080 in your web browser.