Comment rendre un élément à chaque fois que l'état est mis à jour ?

Question

J'essaie de construire un visualiseur de tri en utilisant React. Pour l'instant, j'implémente un bubblesort et je veux voir mon tableau à chaque étape du tri.

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>
        )
    }

Initialement :

Immédiatement après avoir cliqué sur "trier" :

Bien que j'utilise setState dans la boucle pour chaque itération, je ne vois que le tableau trié final. J'aimerais rendre le tableau pour chaque étape du tri (et éventuellement en utilisant une temporisation). Mais je ne parviens pas à le faire.
Quelqu'un peut-il m'aider à modifier ce code pour mettre en place une telle fonctionnalité ?

Answer 1

Oh, il change réellement (le temps d'exécution est si rapide que les yeux ne peuvent le détecter) et vous le verrez si vous mettez un délai dans votre boucle.

Par exemple :

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 })
        }
    }
}