Web worker blocks main thread and freezes UI

[szymswiat]

Overview

I'm using createWorkerFactory and useWorker exactly as shown here, but long running operation started on "web worker" completely freezes UI, like it was executing on main thread.

Scope

• Is this issue related to a specific package?

  • [ ] Tag it with the Package: react-web-worker label.

[szymswiat]

I created an example with reproducing issue: https://codesandbox.io/s/hopeful-mcnulty-xwy9m4?file=/src/worker.ts

[852Kerfunkle]

Same issue here.

[alexcrist]

I seem to be running into the same problem

[qmn1711]

Same issue here. Any update pls?

[alexcrist]

Actually, I believe my problem was due to the fact that I created my project using create-react-app which seems to be incompatible with this particular web-worker library

[maht0rz]

@alexcrist how did you end up solving your problem? I also can't get this to work while trying to follow instructions from the shopify web worker tooling docs.

I've adjusted my CRA webpack config using craco, but my worker script is still included in the main thread, rather than in a standalone worker.

[alexcrist]

@maht0rz - I ended up writing my web worker code without an external library. Unfortunately, the project isn't open source but I'll post some key snippets.

file1.js - the file that calls the web worker

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

const App = () => {

  // Code...

  const onCalculate = async () => {
    worker.postMessage({ someDataDefinedElsewhereInTheComponent });
    worker.addEventListener('message', (message) => {
      const workerResponse = message.data;
      // Handle worker response here
    });
  };

  // More code...
};

export default App;

file2.js - the web worker

self.onmessage = async (message) => {
  const workerInput = message.data;
  const result = doWork(workerInput);
  self.postMessage(result);
};

[VithuJey]

any update on this issue?

[eyorokoninvivoax]

I came across this: https://stackoverflow.com/a/48234335 which points to https://nolanlawson.com/2016/02/29/high-performance-web-worker-messages/ and says to serialize the data sent to the web worker. But I'm still not having any luck and my UI still freezes.

I like how simple Shopify's Web Worker implementation is but since it's not working - Are there any other alternatives to this package anyone recommends in the meantime?

[Andonvr]

I'm having the same problem. I thought the point of WebWorkers was to have them run in the background, and not block the UI...? Why use this package then?

// test.worker.ts
export const test = () => {
  const id = Math.random() * 10

  for (let i = 0; i < 1000000000; i++) {
    continue
  }
  return "DONE!"
}

// useTestWorker.ts
import { useCallback, useEffect, useState } from "react"
import { createWorkerFactory, useWorker } from "@shopify/react-web-worker"

const createWorker = createWorkerFactory(() => import("../workers/test.worker"))

export const useTestWorker = () => {
  const worker = useWorker(createWorker)

  useEffect(() => {
    const runWorker = async () => {
      const result = await worker.test()
      console.log(result)
    }
    runWorker()
  }, [worker])
}

[Wxh16144]

I'm having this problem too and it's very frustrating.

[onursercanyilmaz]

I'm encountering a similar issue despite trying Shopify's package, but the UI freezes persist.

[Arichy]

Same issue here. It seems that the code in worker.ts is actually run in main thread because I tried printing window in it and it had window.

[iSuslov]

Make sure your bundler is properly configured: https://github.com/Shopify/quilt/tree/main/packages/web-worker#tooling

This library only works if your application is bundled with webpack.