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

``bash
npm install react-hooks-worker
`

Usage

slow_fib.worker.js:

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

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

exposeWorker(fib);
`

app.js:

`javascript
import React from 'react';

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

const createWorker = () => new Worker(new URL('./slow_fib.worker', import.meta.url));

const CalcFib = ({ count }) => {
const { result, error } = useWorker(createWorker, count);
if (error) return

Handling pending or stale status is left for library users.
Refer #44
for a recipe for isStale.

API

$3

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

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

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

exposeWorker(fib);
`

$3

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

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

const createWorker = () => new Worker(new URL('./slow_fib.worker', import.meta.url));

const CalcFib = ({ count }) => {
const { result, error } = useWorker(createWorker, count);
if (error) return

`bash
PORT=8080 npm run examples:01_minimal
``

and open in your web browser.

Blogs

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