React Worker Example

App.jsx

import React, { useState, useEffect } from 'react'

const useWebWorker = (workerUrl, callback) => {
  const [worker, setWorker] = useState(null)

  useEffect(() => {
    if (workerUrl) {
      const newWorker = new Worker(workerUrl)
      setWorker(newWorker)
    }
    return () => {
      if (worker) {
        worker.terminate()
      }
    }
  }, [workerUrl])

  useEffect(() => {
    if (worker) {
      worker.addEventListener('message', event => {
        callback(event.data)
      })
    }
  }, [worker])

  return worker
}

export default MyComponent = () => {
  const handleWorkerMessage = data => {
    console.log(data)
  }

  const worker = useWebWorker('/my-worker.js', handleWorkerMessage)

  useEffect(() => {
    if (worker) {
      worker.postMessage('hello from the main thread!')
    }
  }, [worker])

  return <div>My component</div>
}