Como renderizar o elemento cada vez que o estado é atualizado

Question

Estou tentando construir um visualizador de classificação usando React. No momento, estou implementando o bubblesort e quero ver meu array em cada estágio do tipo.

class Sorter extends Component {
    state = {
          array: [100,4,214,55,11,22,10,33],
    }
     bubblesorter = () => {
        let arr = this.state.array
        var len = arr.length,
        i, j, stop;
            for (i=0; i < len; i++){
                    for (j=0, stop=len-i; j < stop; j++){
                        if (arr[j] > arr[j+1]){
                            swap(arr, j, j+1);
                        } 
                        this.setState({array:arr})
                    }
                }   
    }

    render() {
        const array = this.state.array
        // console.log(array)
        return (
            <div>
                <h1>This is a sorter</h1>
                <div className="container">
                    {array.map((value, id) => (
                        <span>
                            <div className="bar" key={id} style={{height: value+"px"}}  >
                            </div>
                        </span>
                    ))}
                </div>
                <button onClick={this.bubblesorter}>Sort</button>
            </div>
        )
    }

Inicialmente:

Imediatamente após clicar em "classificar":

Embora eu esteja usando setState dentro do loop para cada iteração, só vejo a matriz final classificada. Gostaria de renderizar a matriz para cada etapa da classificação (e possivelmente usando um atraso de tempo). Mas não sou capaz de implementar isso.
Alguém pode ajudar em como modificar este código para implementar tal funcionalidade ... Obrigado

Answer 1

Ah, na verdade ele muda (o tempo de execução é tão rápido para os olhos detectarem) e você verá se definir algum atraso em seu loop.

Por exemplo:

bubblesorter = async () => {
    let arr = this.state.array
    var len = arr.length,
        i, j, stop;
    for (i = 0; i < len; i++) {
        for (j = 0, stop = len - i; j < stop; j++) {
            if (arr[j] > arr[j + 1]) {
                swap(arr, j, j + 1);
            }
            // Added 1 second delay here.
            await new Promise(resolve => setTimeout(resolve, 1000));
            this.setState({ array: arr })
        }
    }
}