you need to do one sort operation, and then set the state, so that react re-renders. you also will need to set some timeout, to avoid it all happening so quickly you can't see anything. something like this:

const [currentlyat, setcurrentlyat] = usestate(0);

const bubblesort () => {

   const newarray = [...]
   // perform one step of bubble sort, storing my position in the sort
   // with setcurrentlyat, so i can resume it next time i'm called
   settimeout(() => bubblesort(), 500);  

this allows one step (a single item swap in bubble array) to be performed, state updates so it'll rerender, and timeout gives time for the rerender to be seen by the user before resuming the bubble sort and doing the next swap.

also, please, don't use array and array as variable names to avoid shadowing array, use something like partiallysorted or at least arr. and you don't need to useref at all, your logic where you map over array and have div heights based on array value works fine, you don't want to manually edit the style using a ref.

Related Query

More Query from same tag