How do you debounce input for API validation in Vue or Angular?

WHAT THIS TESTS: This question evaluates your ability to handle reactive user input, manage asynchronous side effects, and prevent race conditions in a modern frontend framework. The interviewer wants to see that you understand stream-based thinking rather than imperative timer management, and that you know how to cancel obsolete work when a newer event arrives.

A GOOD ANSWER COVERS: First, the candidate should mention using a reactive stream for the input, such as Angular's Reactive Forms valueChanges or a Vue ref combined with a watcher. Second, they must apply debounceTime with a realistic delay, typically 300 to 500 milliseconds, to avoid firing on every keystroke. Third, they need to use a flattening operator like switchMap so that each new input value automatically cancels any in-flight validation request, guaranteeing only the latest result updates the UI. Fourth, they should address state management for loading indicators and error handling, ensuring the user sees feedback while the check runs and recovers gracefully if the network fails.

COMMON WRONG ANSWERS: A red flag is reaching for setTimeout or setInterval and storing the timer ID in a variable without proper cleanup on component destroy. Another mistake is subscribing to the API call inside the debounced stream without switching, which creates race conditions where an older slow request resolves after a newer one and overwrites the correct state. Failing to unsubscribe from the observable or watcher when the component unmounts is also a critical error that leads to memory leaks and attempts to update destroyed views.

LIKELY FOLLOW-UPS: The interviewer may ask how you would handle a request that errors, specifically whether retry logic belongs inside the switchMap or at a higher level. They might also probe performance by asking what happens if the user types exactly at the debounce boundary, or how you would implement this without RxJS in Vue using a utility like lodash.debounce. Another common pivot is asking how to abort the underlying fetch or HTTP request rather than just ignoring its response.

ONE CONCRETE EXAMPLE: In Angular with RxJS, you would write this.formControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged(), switchMap(value => this.api.checkUsername(value)), catchError(() => of(null))).subscribe(result => this.isAvailable = result). In Vue with Composition API, you might watch a ref, use lodash.debounce with a 300ms wait inside the watcher, and ensure the debounced function is cancelled in onUnmounted. In both cases, the key is that new input invalidates pending validation work.