React with Web Workers

Use Web Workers for heavy computations.

Create Worker

// worker.js
self.addEventListener('message', (e) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
});

function heavyComputation(data) {
  // Complex calculations
  return processedData;
}

Use in React

import { useState, useEffect } from 'react';

function App() {
  const [result, setResult] = useState(null);

  useEffect(() => {
    const worker = new Worker(new URL('./worker.js', import.meta.url));

    worker.postMessage(largeData);

    worker.onmessage = (e) => {
      setResult(e.data);
    };

    return () => worker.terminate();
  }, []);

  return <div>{result}</div>;
}

Custom Hook

function useWorker(workerFunction) {
  const [result, setResult] = useState(null);
  const [error, setError] = useState(null);

  const runWorker = useCallback((data) => {
    const worker = new Worker(workerFunction);
    worker.postMessage(data);
    worker.onmessage = (e) => setResult(e.data);
    worker.onerror = (e) => setError(e.message);
    return () => worker.terminate();
  }, [workerFunction]);

  return { result, error, runWorker };
}

Remember

• Offload heavy computations
• Don't block main thread
• Workers can't access DOM
• Terminate when done

Next: Learn PWA features!