How would you implement debouncing in a React input to limit API calls?

How would you implement debouncing in a React input to limit API calls?

• A. Debounce by polling the API at fixed intervals regardless of input.
• B. Use a useEffect with a timer (setTimeout) that triggers after a pause, clearing the timer on cleanup.
• C. Use useMemo to memoize API responses.
• D. Call the API on every keystroke without any delay.

Answer: (B)

Debouncing means waiting for the user to pause typing before performing an action, so you don’t fire API calls on every keystroke. In React, this is typically done by starting a timer whenever the input value changes and only calling the API after that timer finishes. By storing the timer in an effect and cleaning it up when the input changes (or when the component unmounts), you cancel any previously scheduled calls if the user keeps typing. When the user stops typing for the chosen delay, the timer fires and the API request is made. This ensures you limit API calls to only those after a pause, which is the essence of debouncing. The other approaches don’t fit debouncing: polling at fixed intervals would trigger calls regardless of input; memoizing API responses doesn’t delay or control when requests happen and isn’t appropriate for dynamic input; calling the API on every keystroke with no delay ignores debouncing entirely.

Debouncing means waiting for the user to pause typing before performing an action, so you don’t fire API calls on every keystroke. In React, this is typically done by starting a timer whenever the input value changes and only calling the API after that timer finishes. By storing the timer in an effect and cleaning it up when the input changes (or when the component unmounts), you cancel any previously scheduled calls if the user keeps typing. When the user stops typing for the chosen delay, the timer fires and the API request is made. This ensures you limit API calls to only those after a pause, which is the essence of debouncing.

The other approaches don’t fit debouncing: polling at fixed intervals would trigger calls regardless of input; memoizing API responses doesn’t delay or control when requests happen and isn’t appropriate for dynamic input; calling the API on every keystroke with no delay ignores debouncing entirely.