Debouncing vs Throttling in React

Debouncing and Throttling are two common techniques used in software development to optimize performance and improve user experience. Both techniques have their advantages and disadvantages, and their selection depends on the specific requirements of the application. Understanding the differences and applications of Debouncing and Throttling is important for developers to create efficient and user-friendly software.

Debouncing

Debouncing is a software technique used to filter out multiple or redundant events that occur in a short time frame, such as rapid mouse clicks or keystrokes. For example, let's take a search bar that searches and suggests autocomplete for each input. Now this search bar sends a request to API after every keypress which in turn increases the total number of requests sent to an API. If a person is typing very fast then he may in turn make a lot of requests which may even freeze the UI. To deal with such conditions a debounce function is used.

The debounce function takes a function and a delay time as parameters. This debounce function calls the function sent to it as argument after a sent delay.

useEffect(() => {
    const delayedSearch = setTimeout(() => {
      if (searchTerm) {
    axios.get(`https://jsonplaceholder.typicode.com/usersname=${searchTerm}`)
          .then(response => {
            setSearchResults(response.data);
          })
          .catch(error => {
            console.log(error);
          });
      } else {
        setSearchResults([]);
      }
    }, 500);

    return () => clearTimeout(delayedSearch);
  }, [searchTerm]);

Throttling

Throttling is a technique used to control the rate at which a function is executed. It limits the maximum number of times a function can be called over a given period of time. Throttling can be used to improve the performance of an application, prevent excessive network traffic, and provide a better user experience.

Throttling is often used in situations where a function might be called frequently, such as in event handling or when making requests to an API. Without throttling, these frequent function calls can cause performance issues, especially when the function involves expensive operations or makes multiple requests to external resources.

function throttle(func, limit) {
  let inThrottle;

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

Difference Between Debouncing and Throttling

Debouncing is used when we want to send an API request if there is a delay in the execution of events whereas in Throttling there is a fixed delay in time or a fixed delay of the number of execution of events after which the Throttle function is again executed and the API is called.

Debouncing is used for GUI-based operations like Search Bar whereas Throttling is used in Scroll Based Events or Resize Events.