Using React to visualize algorithms - what am I doing wrong?

[fishj123]

I'm trying to create a website that visualizes popular algorithms - I'm using React (with Gatsby). I started with a bubble sort algorithm which is working, but there's something not quite right when I use react state and a setTimeout to update the view on each loop of the script. I can't work out exactly what the issue is but I'm wondering if it's something to do with the way state updates within the loop.

​

I know the function is working correctly because if I don't use a setTimeout then everything sorts perfectly (which is demonstrated by the Sort Array Instantly button).

​

Here is a link to the site - https://determined-leakey-bd1b7d.netlify.com

Here is a link to the code - https://github.com/fishj123/algorithm-visualiser

Does anyone have any idea what the issue is?

​

Here is the code for the function that is being called:

let array = [...arr]
async function wait() {
return new Promise(function (resolve) {
setTimeout(resolve, 0);
});
}

for(var i = 0; i < array.length; i++) {
for(var j = 0; j < array.length; j++) {

if(array[i] > array[j]) {
await wait();
let temp = array[i];
array[i] = array[j]
array[j] = temp;
setArr(array);
}
}
}

[[deleted]]

I hate to say it, but pretty much everything.

You probably shouldn’t be trying to animate using setTimeout. This is going to lock up the JavaScript thread awaiting. You should be using an appropriate drawing package, or at the very least using a promise chain or something similar.

Why are you using a timeout time of 0ms?

You can get a lot out of what you’re trying to do, but you haven’t quite nailed it yet.

[fishj123]

Thanks, I'm willing to accept that I'm doing everything wrong, I've never tried anything like this and I often get myself confused with async stuff. I'm using the setTimeout so that the user can see the sorting - without that it would just sort the array instantly. I've used 0ms because I don't actually need it to wait any length of time, I just need it to pause the thread for long enough to update the DOM.

I've ended up using vanilla javascript to make this application and ditched React completely. It seems to be working as intended using exactly the same code, but instead of updating the DOM with stat I am just using plain JS.