);
}
```
### Step 2: the debounced fetch
```
// Custom hook
function useDebouncedValue(value, delay) {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const id = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(id);
}, [value, delay]);
return debounced;
}
// In the component
const debouncedQuery = useDebouncedValue(query, 250);
useEffect(() => {
if (!debouncedQuery) {
setSuggestions([]);
return;
}
let cancelled = false;
fetchSuggestions(debouncedQuery).then(results => {
if (!cancelled) setSuggestions(results);
});
return () => { cancelled = true; };
}, [debouncedQuery]);
```
The cancellation flag prevents stale results from overwriting fresher ones if a slower request resolves after a newer one. This is the most-missed edge case at the senior level.
### Step 3: keyboard navigation
```
function handleKeyDown(e) {
if (e.key === 'ArrowDown') {
e.preventDefault();
setActiveIndex(i => Math.min(i + 1, suggestions.length - 1));
} else if (e.key === 'ArrowUp') {
e.preventDefault();
setActiveIndex(i => Math.max(i - 1, 0));
} else if (e.key === 'Enter') {
e.preventDefault();
if (activeIndex >= 0) {
onSelect(suggestions[activeIndex]);
setIsOpen(false);
}
} else if (e.key === 'Escape') {
setIsOpen(false);
}
}
// On the input