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

Related explainers

python 
from fastapi import FastAPI, WebSocket, WebSocketDisconnect
 
app = FastAPI()
 

Building a WebSocket chat with FastAPI

websockets broadcast connection-management
Intermediate 9 steps
javascript 
function evaluate(expression) {
  const tokens = tokenize(expression);
  let pos = 0;
 

Building a recursive descent calculator

parsing recursion operator-precedence
Intermediate 8 steps
rust 
use axum::{
    extract::{Path, State},
    response::sse::{Event, KeepAlive, Sse},
};

Streaming import progress with SSE in Axum

server-sent-events streams watch-channel
Advanced 7 steps
javascript 
import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks
Advanced 10 steps
php 
<?php
 
namespace App\Services;
 

Building a cached daily leaderboard in Laravel

caching aggregation eager-loading
Intermediate 9 steps
python 
import secrets
 
from django.contrib.auth import authenticate, login
from django.core.cache import cache

Two-factor login with OTP in Django

two-factor-auth one-time-passwords caching
Intermediate 9 steps

Share this explainer

Here's the card — post it anywhere.

Building a typeahead with an LRU cache — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code