#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/autocomplete-design/debouncing-input

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░███████████████████████████████████████████████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/autocomplete-design/debouncing-input

Repovive

Debouncing Input - Autocomplete Design | Frontend System Design Interview Prep | Repovive

Repovive.

Frontend System Design Interview Prep17 sections · 206 units12h total

Open in Course

Debouncing Input

Avoiding excessive requests

Don't fetch on every keystroke. Debounce the input.

Without debouncing: User types "react" → $5$ API calls.

With debouncing: Wait $300$ ms after last keystroke → $1$ API call.

Implementation:

const debouncedFetch = useMemo(
  () => debounce(query => {
    fetchSuggestions(query).then(setSuggestions);
  }, 300),
  []
);

useEffect(() => {
  if (query.length >= minChars) {
    debouncedFetch(query);
  }
}, [query]);

Typical values: $200$ - $400$ ms debounce. Minimum $2$ - $3$ characters before searching.