Agon Lohaj Agon Lohaj - 1 year ago 122
Javascript Question

React JS asynchronous heavy calculations

I'm trying to do some heavy calculations in JavaScript. I'm currently using React with Redux.

Doing a fetch or server requests using some library like fetch or jQuery ajax requests are working asynchronous as expected, however I cannot do asynch computations on the client side using my own JavaScript functions.

Doing this inside a React component componentDidMount function using setTimeout like this blocks my UI:

componentDidMount () {
setTimeout(function() {
... do heavy calculations
}, 0)

or inside a dispatch action like this (I'm using redux-thunk):

heavyCalculationsAction: () => {
return dispatch => {
return new Promise(function (resolve, reject) {
setTimeout(function () {
... perform heavy calculations here
}, 0)
}).then((data) => {

On both cases the UI freezes until the computations are done.

Maybe I should be approaching this with web workers or something else, since I can't get setTimeout to release my UI thread.

Answer Source

Javascript is single-threaded and generally runs in the UI thread. setTimeout does not run code in a background thread, so anything it runs will block your UI.

To do large amounts of work, you need to use web workers (which run in a separate non-UI thread), or you need to break up your work into smaller chunks, and only do a little bit at a time spread out over time by using setTimeout or requestIdleCallback to schedule each chunk.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download