javascript - 反応jsで並べ替えアニメーションを作成する方法

Question

プロジェクトの反応 js で並べ替えビジュアライザーを作成しようとしています。

今のところバブルソートのみ実装していますが、クイックソートやマージソートなども実装予定です。

ソートアルゴリズムが基本的にどのように機能するかを段階的に示す素敵なアニメーションを追加するにはどうすればよいですか?

変更を加えるたびに配列を更新する必要がありますか、それとも他の方法がありますか?

SortingVisualizer.tsx

import "./SortingVisualizer.css";
import React, { useEffect, useState } from "react";
import * as sortings from "../sortingAlgorithms";
// Change this value for the number of bars (value) in the array.
const NUMBER_OF_ARRAY_BARS = 50;
// This is the main color of the array bars.
const PRIMARY_COLOR = "turquoise";

function SortingVisualizer() {
  const [array, setArray] = useState<number[]>([]);

  const resetArray = () => {
    const randomNumbers = [];
    for (let i = 0; i < NUMBER_OF_ARRAY_BARS; i++) {
      randomNumbers.push(randomIntFromInterval(5, 730));
    }
    setArray(randomNumbers);
  };

  const bubbleSort = () => {
    setArray(sortings.bubbleSort(array.slice()));
  };

  useEffect(() => {
    resetArray();
  }, []);

  return (
    <div className="array-container">
      {array.map((value, idx) => (
        <div
          className="array-bar"
          key={idx}
          style={{
            backgroundColor: PRIMARY_COLOR,
            height: `${value}px`,
          }}
        ></div>
      ))}
      <button onClick={bubbleSort}>Bubble Sort</button>
    </div>
  );
}

export default SortingVisualizer;

function randomIntFromInterval(min: number, max: number) {
  // min and max included
  return Math.floor(Math.random() * (max - min + 1) + min);
}

SortingVisualizer.css

.array-container {
    position: absolute;
    left: 100px;
    /* top: 100px; */
}

.array-bar {
    width: 5px;
    display: inline-block;
    margin: 0 1px;
}

sortingAlgorithms.ts

export const bubbleSort = (arr: number[]) => {
  const length = arr.length;
  for (let i = 0; i < length - 1; i++) {
    for (let j = 0; j < length - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        swap(arr, j, j + 1);
      }
    }
  }
  return arr;
};

const swap = (arr: number[], i: number, j: number) => {
  const temp = arr[i];
  arr[i] = arr[j];
  arr[j] = temp;
};