Throttling vs Debouncing in JavaScript

Optimizing performance is essential in building modern web applications. To deliver a smooth and responsive user experience, developers often rely on various techniques to boost efficiency. Among these, debouncing and throttling stand out as simple yet highly effective strategies used in JavaScript to enhance performance. In this post, we'll explore what debouncing and throttling are, how they differ, and why they're important tools for managing performance in JavaScript applications. What is Debouncing? Delays function execution until a certain time has passed since the last call. Best for: search inputs, auto-save, resize events. Example: function debounce(fn, delay) { let timer; return function(...args) { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); }; } const handleInput = debounce((e) => { console.log("API call for:", e.target.value); }, 300); Let's say you have a search input field and you want to make an API call to fetch search results. Without debouncing, an API call would be made every time the user enters a character, which could lead to a large number of unnecessary api calls. Debouncing ensures that the API call is only made after the user has stopped typing for a specified amount of time. In the above example, debouncing ensures to call api only after user stopped typing for 300ms of time. Throttling Ensures a function is only called once per specified time interval. Best for: scroll events, window resize, mouse movement. Example: function throttle(func, limit) { let inThrottle; return function (...args) { if (!inThrottle) { func.apply(this, args); inThrottle = true; setTimeout(() => (inThrottle = false), limit); } }; } // Usage const handleResize = throttle(() => { // Update element positions console.log('Window resized'); }, 100); window.addEventListener('resize', handleResize); Let's say you have a function that updates the position of elements on the screen based on the window size. Without throttling, this function could be called many times per second as the user resizes the window, leading to performance issues. Throttling ensures that the function is only called once in a specified time interval. Debouncing and Throttling in React Using useCallback with custom debounce/throttle functions. Optional: Introduce lodash.debounce or lodash.throttle. using custom hooks to handle debounce or throttle which will be single point of contact and reusable across the project. import { useEffect, useState } from 'react'; function useDebounce(value, delay = 500) { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const timer = setTimeout(() => { setDebouncedValue(value); }, delay); return () => { clearTimeout(timer); }; }, [value, delay]); return debouncedValue; } function App() { const [searchTerm, setSearchTerm] = useState(''); const debouncedSearchTerm = useDebounce(searchTerm, 1000); useEffect(() => { fetch(apiCall) }, [debouncedSearchTerm]); const handleChange = (event) => { setSearchTerm(event.target.value); }; return ( ) } Further reading Debounce Throttle Thanks for reading this post. Have a great day.

Apr 13, 2025 - 09:19

Optimizing performance is essential in building modern web applications. To deliver a smooth and responsive user experience, developers often rely on various techniques to boost efficiency. Among these, debouncing and throttling stand out as simple yet highly effective strategies used in JavaScript to enhance performance.

In this post, we'll explore what debouncing and throttling are, how they differ, and why they're important tools for managing performance in JavaScript applications.

What is Debouncing?

Delays function execution until a certain time has passed since the last call.
Best for: search inputs, auto-save, resize events.

Example:

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const handleInput = debounce((e) => {
  console.log("API call for:", e.target.value);
}, 300);

Let's say you have a search input field and you want to make an API call to fetch search results. Without debouncing, an API call would be made every time the user enters a character, which could lead to a large number of unnecessary api calls. Debouncing ensures that the API call is only made after the user has stopped typing for a specified amount of time.

In the above example, debouncing ensures to call api only after user stopped typing for 300ms of time.

Throttling

Ensures a function is only called once per specified time interval.
Best for: scroll events, window resize, mouse movement.

Example:

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

// Usage
const handleResize = throttle(() => {
  // Update element positions
  console.log('Window resized');
}, 100);

window.addEventListener('resize', handleResize);

Let's say you have a function that updates the position of elements on the screen based on the window size. Without throttling, this function could be called many times per second as the user resizes the window, leading to performance issues. Throttling ensures that the function is only called once in a specified time interval.

Debouncing and Throttling in React

Using useCallback with custom debounce/throttle functions.
Optional: Introduce lodash.debounce or lodash.throttle.
using custom hooks to handle debounce or throttle which will be single point of contact and reusable across the project.

import { useEffect, useState } from 'react';

function useDebounce(value, delay = 500) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);

  return debouncedValue;
}

function App() {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 1000);

  useEffect(() => {
    fetch(apiCall)
  }, [debouncedSearchTerm]);

  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
     
      
       
  )
}