Hey guys... I need some help. I have a react project which needs to fetch around 10MB of JSON data from server and then do a computation on that whole data. The UI completely stops obviously because of the computation. I tried using promises for computation but still nothing. The UI still stops completely. Can someone help please?

I assume there is a good reason why you do the computation on the client side in the first place? Because you will get a lot of "do the computation server side!" type answers in this case. If everything freezes it's a thread issue (rendering and computation thread is the same).

Chunk it?

If you really HAVE to do that client-side, you may want to use Web Workers. MDN's documentation on these seems rather nice. I'm no JS expert, but as far as I know, that's how you can run long computations in the background.

If you need something more convenient to work with, there super-workers seems to be a more convenient way to work with them, providing you with a promise based encapsulation of the websocket based IPC you'd have to use to communicate between your main thread and your workers.

The only reason you would do that kind of heavy client side computation is if your app behaves based on what the client is using (browser, IP address, software, hardware etc.). Other than that I don’t see a reason why you would do any heavy computation in the front end. Your client should be as dumb as possible and should just do dumb CRUD http calls.

It should probably be done server side, and cached. If that's not possible, use web workers.

If it’s sensitive client data, that should always be transferred securely and processed on the client.

How do I get web worker to work in React.js I have tried creating a worker file, creating a blob and then using Worker API to create new Worker and then use it. But I am getting unexpected token error '<' like this. Can you help me out with resources to get a worker working in react.js