Debouncing and Throttling in React and Angular: Code Examples

When building modern web apps, performance matters. Typing in a search bar, resizing a window, or scrolling a page can trigger hundreds of events per second. If each event runs expensive logic (like an API call), your app slows down.

That’s where Debouncing and Throttling come in — two techniques to control event execution frequency.

⏱ Debouncing

Debouncing ensures a function runs only after a certain amount of time has passed since the last event.

👉 Use Case: Search input (API should trigger only after the user stops typing).

✅ React Example: Debounce with useEffect

import React, { useState, useEffect } from "react";

function SearchBox() {
  const [query, setQuery] = useState("");

  useEffect(() => {
    const handler = setTimeout(() => {
      if (query) {
        console.log("API call with:", query);
      }
    }, 500); // wait 500ms after last keystroke

    return () => clearTimeout(handler);
  }, [query]);

  return <input onChange={(e) => setQuery(e.target.value)} />;
}

✅ Angular Example: Debounce with RxJS

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'app-search',
  template: `<input [formControl]="searchControl" />`
})
export class SearchComponent {
  searchControl = new FormControl();

  constructor() {
    this.searchControl.valueChanges
      .pipe(debounceTime(500)) // wait 500ms
      .subscribe(value => console.log("API call with:", value));
  }
}

⚡ Throttling

Throttling ensures a function runs at most once in a given time interval.

👉 Use Case: Window resize or scroll events.

✅ React Example: Throttle Scroll

import React, { useEffect } from "react";

function ScrollTracker() {
  useEffect(() => {
    const handleScroll = () => {
      console.log("Scroll position:", window.scrollY);
    };

    const throttled = throttle(handleScroll, 1000);

    window.addEventListener("scroll", throttled);
    return () => window.removeEventListener("scroll", throttled);
  }, []);

  const throttle = (fn, limit) => {
    let inThrottle;
    return function (...args) {
      if (!inThrottle) {
        fn(...args);
        inThrottle = true;
        setTimeout(() => (inThrottle = false), limit);
      }
    };
  };

  return <h2>Scroll the page!</h2>;
}

✅ Angular Example: Throttle with RxJS

import { Component, HostListener } from '@angular/core';
import { fromEvent } from 'rxjs';
import { throttleTime } from 'rxjs/operators';

@Component({
  selector: 'app-scroll-tracker',
  template: `<h2>Scroll the page!</h2>`
})
export class ScrollTrackerComponent {
  ngOnInit() {
    fromEvent(window, 'scroll')
      .pipe(throttleTime(1000)) // execute every 1s
      .subscribe(() => {
        console.log("Scroll position:", window.scrollY);
      });
  }
}

📊 Debounce vs Throttle

Feature Debounce Throttle
Execution After inactivity At regular intervals
Use Cases Search, autocomplete, resize end Scroll, resize, mouse move

✅ Conclusion

• Use Debouncing when you want to wait until a user stops performing an action.
• Use Throttling when you want to limit how often something executes during continuous actions.

Both techniques are essential for smooth, performant apps in React and Angular.