Algorithms Every Frontend Developer Should Know

Working on large-scale applications at a my company, I've learned that certain algorithms appear everywhere in frontend development. These aren't textbook sorting algorithms, they're practical tools that solve real user experience problems.

1. Debouncing: Prevent API Spam

The Problem: Search boxes trigger API calls on every keystroke, causing performance issues.

The Solution:

import { useEffect, useState } from "react";
import "./styles.css"; // optional, for your own styling

// Custom debounce hook
const useDebounce = (value: string, delay: number) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
};

// Simulated dummy API with setTimeout
const fakeSearchAPI = (query: string): Promise<string[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const dummyData = ["Apple", "Banana", "Orange", "Grape", "Kiwi", "Mango"];
      const filtered = dummyData.filter((item) =>
        item.toLowerCase().includes(query.toLowerCase())
      );
      resolve(filtered);
    }, 500); // simulate 500ms network delay
  });
};

export default function App() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<string[]>([]);
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (debouncedQuery.trim() !== "") {
      fakeSearchAPI(debouncedQuery)
        .then(setResults)
        .catch((err) => console.error("API error:", err));
    } else {
      setResults([]); // clear results when query is empty
    }
  }, [debouncedQuery]);

  return (
    <div style={{ padding: "2rem", fontFamily: "sans-serif" }}>
      <h2>Debounced Search (Fake API)</h2>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search fruits..."
        style={{ padding: "0.5rem", width: "300px", fontSize: "16px" }}
      />
      <ul>
        {results.length > 0
          ? results.map((item, idx) => <li key={idx}>{item}</li>)
          : debouncedQuery && <p>No results found.</p>}
      </ul>
    </div>
  );
}

Try it live →

Impact: Reduced API calls by 85% in our production search feature.

2. Throttling: Smooth Scroll Performance

The Problem: Scroll events fire 60+ times per second, blocking the main thread.

The Solution:

import React, { useState } from "react";
import { useThrottle } from "./useThrottle";
import { useInfiniteScroll } from "./useInfiniteScroll";

const InfiniteScrollExample = () => {
  const [items, setItems] = useState(
    Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`)
  );
  const [loading, setLoading] = useState(false);

  const loadMoreItems = () => {
    if (loading) return;
    setLoading(true);

    setTimeout(() => {
      const newItems = Array.from(
        { length: 10 },
        (_, i) => `Item ${items.length + i + 1}`
      );
      setItems((prev) => [...prev, ...newItems]);
      setLoading(false);
    }, 1000); // Simulate network delay
  };

  useInfiniteScroll(loadMoreItems);

  return (
    <div style={{ padding: "16px" }}>
      <h1>Infinite Scroll Example</h1>
      <ul style={{ listStyle: "none", padding: 0 }}>
        {items.map((item, index) => (
          <li
            key={index}
            style={{ margin: "10px 0", padding: "10px", background: "#f0f0f0" }}
          >
            {item}
          </li>
        ))}
      </ul>
      {loading && <p>Loading more...</p>}
    </div>
  );
};

export default InfiniteScrollExample;

Try it live →

Key Takeaways

1. Debouncing prevents excessive API calls and improves UX

2. Throttling keeps scroll interactions smooth

These algorithms directly impact user experience and are frequently discussed in interviews. Master them by implementing the examples above and measuring performance improvements in your own applications.

The best way to learn these algorithms is by implementing them yourself and seeing the performance differences firsthand.

Next Steps: Try the CodeSandbox examples, measure performance with Chrome DevTools, and implement these patterns in your next project.

I will be writing about virtual scrolling and smart search in my next article.