javascript 41 lines · 9 steps

Building a typeahead with an LRU cache

A search-as-you-type helper that caches results, evicts the oldest entries, and deduplicates in-flight requests.

Explained by highlit

Intermediate caching lru-eviction request-deduplication closures async

1const cache = new Map();
2const inflight = new Map();
3 
4async function fetchResults(query) {
5  const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
6  if (!res.ok) throw new Error(`Search failed: ${res.status}`);
7  return res.json();
8}
9 
10function createTypeahead({ minChars = 2, maxCacheSize = 50 } = {}) {
11  async function search(raw) {
12    const query = raw.trim().toLowerCase();
13    if (query.length < minChars) return [];
14 
15    if (cache.has(query)) {
16      const hit = cache.get(query);
17      cache.delete(query);
18      cache.set(query, hit);
19      return hit;
20    }
21 
22    if (inflight.has(query)) return inflight.get(query);
23 
24    const promise = fetchResults(query)
25      .then((results) => {
26        cache.set(query, results);
27        if (cache.size > maxCacheSize) {
28          cache.delete(cache.keys().next().value);
29        }
30        return results;
31      })
32      .finally(() => inflight.delete(query));
33 
34    inflight.set(query, promise);
35    return promise;
36  }
37 
38  return { search, clear: () => cache.clear() };
39}
40 
41export default createTypeahead;

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1A Map preserves insertion order, so deleting and re-setting a key turns it into a simple LRU cache.
2Tracking in-flight promises lets concurrent identical requests share one network call instead of racing.
3Normalizing input and enforcing a minimum length keeps the cache small and avoids wasteful queries.

Related explainers

javascript

const DIVISIONS = [
  { amount: 60, unit: 'seconds' },
  { amount: 60, unit: 'minutes' },
  { amount: 24, unit: 'hours' },

Building a human-friendly timeAgo formatter

internationalization relative-time lookup-table

Intermediate 6 steps

javascript

export function createSearchClient(baseUrl) {
  let inFlight = null;
 
  async function search(query, { signal } = {}) {

Cancelling stale requests in a search client

closures abortcontroller async

Intermediate 8 steps

package middleware
 
import (
	"time"

Building a request logger middleware in Gin

middleware structured-logging closures

Intermediate 6 steps

python

from functools import lru_cache
import math

Memoizing number theory with lru_cache

memoization number-theory caching

Intermediate 8 steps

ruby

class ReportGenerator
  def initialize(account, period)
    @account = account
    @period = period

Memoized report metrics in Ruby in Rails

memoization query-composition service-object

Intermediate 7 steps

javascript

export function cloneState(state) {
  if (typeof structuredClone !== "function") {
    throw new Error("structuredClone is not available in this runtime");
  }