SortingVisualizer | approximate runtimes for , and anything

If you are familiar with ES6 async/await you can use this function

You forgot to actually invoke Math.random() inside your randomIntFromInterval() function, so change it to return Math.floor(Math.random() * (max - min + 1) + min);

Use Vue.set when changing values in the array.

I don't know what the best solution is, but a solution would be to use useRef.

The problem is related to Why am I seeing stale props or state inside my function? : On each render you are creating new functions for bubbleSort and combSort. Those functions use the value of getDelay that existed at the moment those functions have been created. When one of the buttons is clicked the "version" of the function of the last render will be executed, so the value of getDelay that existed then and there will be used.

Now, changing the slider will cause a rerender, and thus new versions of bubbleSort and combSort are created ... but those are not the versions that are currently running!

useRef solves that problem because instead of directly referring to the delay, we are referring to an object whose current property stores the delay. The object doesn't change, but the current property does and every time it's accessed we get the current value. I highly encourage you to read the documentation.

After your state variables, add

React will focus on performance whenever it can. So for example, it will aggregate a bunch of setState calls and handle them in batches to prevent unnecessary renders. Great for most web applications, not great for visualizations such as this.

What you can do is wait for a render to complete before moving on to the next state. Timers and async/await would make this pretty easy to read and complete.