Debouncing and Throttling in React and Angular: Code Examples

#webdev #angular #react #debouncing

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.

DEV Community