Most developers know Merge Sort is faster
than Bubble Sort. But watching it happen
makes the difference visceral.

The Numbers

Bubble Sort: 800+ comparisons
Merge Sort: 147 comparisons
Same 30 elements. Same result.

Why Such a Difference?

Bubble Sort compares adjacent elements
and moves them one step at a time —
O(n²) in worst case.

Merge Sort divides the array completely
down to single elements, then merges
them back in sorted order — O(n log n)
guaranteed every single time.

The Key Code

The entire algorithm is built on one
recursive insight:

\javascript
function mergeSort(arr, left, right) {
if (left >= right) return;
const mid = Math.floor((left + right) / 2);
mergeSort(arr, left, mid);
mergeSort(arr, mid + 1, right);
merge(arr, left, mid, right);
}
\\

A single element is already sorted by
definition. Everything else is just
merging sorted groups together.

Built in React — Zero Libraries

Animation state managed entirely with
useState and useRef. No external
animation libraries.

Color coding:

• Purple = unsorted
• Gold = currently merging
• Red = comparing
• Cyan = fully sorted

Watch It

What's Next

Quick Sort — the algorithm that actually
powers sorting in most programming
languages. Spoiler: it's faster than
Merge Sort in practice despite worse
worst-case complexity.

Subscribe to AlgoCanvas:
👉 youtube.com/@AlgoCanvas