/reactuse

useWebWorkerCallback

Runs a self-contained function off the main thread and returns a promise-based runner for component code.

Usage

import { useWebWorkerCallback } from "@siberiacancode/reactuse";

const worker = useWebWorkerCallback((input: number) => input * 2);

Example

import { useWebWorkerCallback } from "@siberiacancode/reactuse";

export const HeavyCompute = () => {
  const worker = useWebWorkerCallback((count: number) => {
    let total = 0;
    for (let index = 0; index < count; index++) total += index;
    return total;
  });

  return (
    <button
      disabled={worker.pending}
      onClick={async () => console.log(await worker.run(1000000))}
    >
      Run
    </button>
  );
};

callback:

const worker = useWebWorkerCallback((value: number) => value * 2);

run(...args):

const doubled = await worker.run(21);

Notes

• Hook uses the Worker API.

Type Declarations

export interface UseWebWorkerCallbackReturn<
  Callback extends (...args: any[]) => any
> {
  pending: boolean;
  run: (...args: Parameters<Callback>) => Promise<Awaited<ReturnType<Callback>>>;
  terminate: () => void;
}
export declare const useWebWorkerCallback: <
  Callback extends (...args: any[]) => any
>(
  callback: Callback
) => UseWebWorkerCallbackReturn<Callback>;