Typing gets much slower after 3+ characters
← Back to incidents
React incident
Search box typing lag under product-card load
Typing gets laggy after the third character because every keypress does too much work and also triggers a request.
Easy12 min
Failure signals
The clues you start with
Most time is spent filtering and highlighting before the screen updates
Every keypress also sends a network request
Overview
What failed in production?
Start by making the bug legible: what the user saw, why it mattered, and what the product was doing underneath.
Symptom
Search feels fine at first, but once there are more matching items, each keypress feels about 200ms late.
User impact
Users think the input is missing characters and give up before finishing the search.
Environment
React 18 catalog page with about 2,400 product cards. The app also asks the server for suggestions on every change.
Evidence pack
What you can inspect before answering
Metric
Real-user timing
For slower real-world sessions, input delay jumps from about 40ms to a little over 200ms after the third character.
Log
Profiler result
Most of the time is spent filtering items and building highlights before the screen updates.
Snippet
Current handler
const onChange = (value: string) => {
setQuery(value);
setResults(expensiveFilter(allItems, value));
fetchSuggestions(value);
};