In a nutshell

MyRadComponent.tsx

import React from 'react';
import { useWorkerFunc } from 'use-react-workers';

// Heavy compute function
function fibonacci(n: number): number {
  return n <= 1 ? n : fib(n - 1) + fib(n - 2);
}

const MyCoolComponent = () => {
  const [fibWorker] = useWorkerFunc(fibonacci);

  const withWorker = async () => {
    const result = await fibWorker(45); // Will not block the main thread 🥳
    console.log(result);
  };

  const without = () => {
    const result = fibonacci(45); // Main thread is blocked 😪
    console.log(result);
  };

  return (
    <div className="flex gap-4">
      <button className="btn" onClick={withWorker}>
        With Worker
      </button>
      <button className="btn" onClick={without}>
        Without Worker
      </button>
    </div>
  );
};

Check out the Author Justin Wallace is a Senior Software Engineer at OctoML and is always open to collaberation or just a chat