Onboarding a junior dev this was gold - it drew the data flow as ASCII and it clicked

## What this code does `debounce(fn, wait)` returns a wrapped function that delays invoking `fn` until `wait` ms have passed since the last call — used in the search bar to avoid firing a request on every keystroke. ## Architecture context Lives in the UI utility layer of the React frontend, between the input component and the API client. Pure function, no React dependency, so it is unit-testable in isolation. ## Block-by-block - **Closure over `timeout`** — persists the pending timer handle across calls. - **`clearTimeout(timeout)`** — cancels the previously scheduled call, so rapid calls collapse into one. - **`apply(this, args)`** — preserves the caller's `this` and forwards all arguments, so it is a transparent wrapper. ## Data flow ``` keystroke ──▶ debounced(e) ──▶ clearTimeout(prev) │ setTimeout(wait) ──▶ fn(e) ──▶ fetch() ``` ## Gotchas - The trailing-edge only design means the very first keystroke is also delayed — no leading invocation. - `this` binding breaks if you wrap an arrow function; document that callers must pass a regular function.