React with Web Workers

Use Web Workers for heavy computations.

Create Worker

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

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

Use in React

```javascript 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

```javascript 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!