Debouncing & Throttling with Lodash in React

In React, performance optimization is essential, especially when handling user input or actions that could trigger frequent updates, such as keystrokes, window resizing, or scrolling. Debouncing and throttling are two techniques that help control the rate at which these actions are processed to improve performance. Lodash, a popular utility library, provides efficient implementations for both debouncing and throttling.

This guide will walk you through the concepts of debouncing and throttling, how to implement them in React using Lodash, and best practices for using them.

1. What is Debouncing?

Debouncing is a technique used to ensure that a function is only called after a certain amount of time has passed since the last time it was invoked. It’s useful when you want to delay the execution of a function until a certain period of time has elapsed, such as waiting for the user to stop typing before performing an API call or search.

Example Use Case for Debouncing:

Search Input: You don’t want to make an API call with every keystroke. Instead, you can debounce the input to trigger the API call only after the user stops typing for a set duration.

2. What is Throttling?

Throttling is a technique that ensures a function is only called at a maximum rate, no matter how frequently the triggering event occurs. Unlike debouncing, which delays the function execution, throttling limits how often the function can be called.

Example Use Case for Throttling:

Scroll Event: When handling the scroll event, you may want to throttle the event handler to avoid making too many updates (such as lazy loading) on every scroll.

3. Debouncing with Lodash in React

Lodash provides the debounce() function, which can be used to wrap the function you want to debounce. It takes two parameters:

The function to debounce.
The wait time (in milliseconds) for which the function will wait after the last invocation before executing.

Example: Debouncing a Search Input Field in React

import React, { useState } from "react";
import { debounce } from "lodash";

const SearchComponent = () => {
  const [query, setQuery] = useState("");

  // Debounced version of the search function
  const handleSearch = debounce((query) => {
    console.log("Search for:", query);
    // Perform API call or other action here
  }, 500); // Wait for 500ms after the user stops typing

  const handleChange = (e) => {
    setQuery(e.target.value);
    handleSearch(e.target.value); // Trigger debounced function
  };

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleChange}
        placeholder="Search..."
      />
    </div>
  );
};

export default SearchComponent;

Explanation:

The handleSearch function is debounced using lodash.debounce().
It only gets triggered after 500ms have passed since the last input change, preventing unnecessary re-renders or API calls with every keystroke.

4. Throttling with Lodash in React

Lodash provides the throttle() function, which can be used to limit how frequently a function can be called. The function will execute at a fixed interval regardless of how many times the event is triggered during that interval.

Example: Throttling a Scroll Event in React

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

const ScrollComponent = () => {
  const [scrollPosition, setScrollPosition] = useState(0);

  // Throttled version of the scroll handler
  const handleScroll = throttle(() => {
    setScrollPosition(window.scrollY);
  }, 200); // Update scroll position at most every 200ms

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <div style={{ height: "2000px" }}>
      <h1>Scroll position: {scrollPosition}</h1>
    </div>
  );
};

export default ScrollComponent;