What is Debouncing?

Debouncing is a technique to control the rate at which a function is executed. It ensures that the function is triggered only after a specified amount of time has passed since the last event. This means if the event is triggered again within the wait time, the timer resets.

It is especially useful when dealing with input fields, where users may type rapidly, but you want to wait until they’ve stopped typing before performing an action (e.g., making an API call).

Real-World Analogy

Imagine you’re writing on a whiteboard and someone wants to take a photo only when you’ve stopped writing for 2 seconds. Every time you start writing again, they reset the timer. Only when you stop for a full 2 seconds, they snap the photo. That is debouncing.

Why Use Debouncing in React?

Debouncing helps to:

• Prevent excessive function calls (like API requests) on every keystroke
• Reduce memory and CPU consumption
• Improve performance and user experience

React Example: Debounced Search Input

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

function SearchWithDebounce() {
  const [query, setQuery] = useState('');
  const [debouncedQuery, setDebouncedQuery] = useState('');

  // Debounce effect
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedQuery(query);
    }, 500); // delay of 500ms

    // Cleanup previous timer
    return () => {
      clearTimeout(handler);
    };
  }, [query]);

  useEffect(() => {
    if (debouncedQuery) {
      console.log('API call triggered with:', debouncedQuery);
      // You can call your API here
    }
  }, [debouncedQuery]);

  return (
    <div>
      <h2>Debounced Search</h2>
      <input
        type="text"
        value={query}
        placeholder="Type to search..."
        onChange={(e) => setQuery(e.target.value)}
      />
    </div>
  );
}

export default SearchWithDebounce;

Explanation

• query holds the current input from the user.
• debouncedQuery updates only after 500ms of no new keystrokes.
• On every keystroke, the existing timeout is cleared and a new one is set.
• The debouncedQuery effect is used to trigger an API call or perform another side effect.

Alternative: Lodash Debounce

You can also use lodash’s debounce function.

Install lodash:

npm install lodash

Use in code:

import { debounce } from 'lodash';

const debouncedFn = debounce(() => {
  console.log('Debounced call');
}, 500);

<input onChange={debouncedFn} />

Note: Be cautious using this directly in JSX; instead wrap it properly in useCallback and useEffect to avoid unnecessary rerenders.

When to Use Debouncing

• Input fields for live search or filtering
• Resize events
• Autocomplete dropdowns
• Form validation

Conclusion

Debouncing is an essential performance optimization technique in React that ensures actions only occur once the user has paused their input. It’s especially powerful when paired with APIs or expensive computations. By applying debouncing, you can keep your apps fast and responsive without compromising functionality.