Binary Search vs Linear Search — Visualized in React with No Libraries

As a Senior React developer I wanted to
show exactly WHY binary search exists —
not just explain it with words.

So I built a side by side comparison
showing both algorithms running on the
same array searching for the same target.

The Visual Difference

Linear search checks every element from
left to right. Predictable but slow.

Binary search goes straight to the middle.
Higher or lower? Eliminate half. Repeat.

Tech Stack

• React functional components
• useState for animation state
• useRef for timeout management
• Zero external animation libraries

The Key Code

Two separate animation pipelines running
sequentially — linear first, then binary:

\`javascript
// Linear search steps
for (let i = 0; i < array.length; i++) {
steps.push({ checking: i });
if (array[i] === target) break;
}

// Binary search steps

while (low <= high) {
const mid = Math.floor((low + high) / 2);
steps.push({ middle: mid, eliminated });
if (array[mid] === target) break;
else if (array[mid] < target) low = mid + 1;
else high = mid - 1;
}
`\

The Result

What's Next

Building visualizations for:

• Merge Sort
• Quick Sort
• Dijkstra's Algorithm
• Binary Search Trees
• Hash Tables

Subscribe to AlgoCanvas on YouTube:
👉 youtube.com/@AlgoCanvas

Feedback welcome — drop a comment below!