react-hooks-worker

react-hooks-worker

React custom hooks for web workers.

Motivation

React Hooks API is promising. Web Workers API is promising.

This is an experimental library to provide an easy way to call web workers. It's more or less for fun, but feedbacks are welcome to make this for production.

Install

npm install react-hooks-worker

Usage

import React from 'react';

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

const calcFib = x => {
  const fib = i => (i <= 1 ? i : fib(i - 1) + fib(i - 2));
  return fib(x);
};

const CalcFib: React.FC<{ count: number }> = ({ count }) => {
  const { result, error } = useWorker(calcFib, count);
  if (error) return <div>Error: {error}</div>;
  return <div>Result: {result}</div>;
};

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

Caveat

Using inline function or string representation has a potential risk of including malicious code. Please pay attention to protect from XSS.

Working Issues

If the function passed into useWorker(function) has external dependencies, then function must be in its own file and directly import those node modules.

// WorkerFibFile.js
import SomeExternalModule from 'external-module-example'

// calcFib has an external dependency: `SomeExternalModule`
export default const calcFib = (x) => {
  SomeExternalModule();
  const fib = i => (i <= 1 ? i : fib(i - 1) + fib(i - 2));
  return fib(x);
};

// App.js
import React from 'react';
import { useWorker } from 'react-hooks-worker';
import FibWorker from './WorkerFibFile';

const App = () => (
  const { result, error }= useWorker(FibWorker, 5);
  return <div>{result}</div>
);

Usage with Parcel

Parcel allow your Web Worker script to be automatically bundled. To do this, just pass an instance of the Web Worker instead of the url:

const myWorker = new Worker('./slow_fib.js');

const { result, error } = useWorker(myWorker, count);

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.

You can also try them in codesandbox.io: 01 02 03 04 05

Blogs

• Playing with React Hooks and Web Workers

Changelog

[0.7.0] - 2019-07-13

Changed

• Revoke objectURL on cleanup (#9)