🚀 Debouncing in JavaScript & React — Make Your App Smoother!

March 29, 2025

This content originally appeared on DEV Community and was authored by Rajat Sharma

Hey folks! I’m Rajat Sharma, and today we’re diving into an underrated but powerful concept: Debouncing.

Have you ever typed in a search bar and noticed how some apps wait a moment before responding?

That’s not lag — it’s debouncing, and it’s intentional.

In this article, you’ll learn:

What debouncing is
Why it matters in modern web apps
How to implement it in React (with real API examples!)
And the trade-off it brings

Let’s go!

What is Debouncing?

Debouncing is a technique used to delay the execution of a function until a certain time has passed since it was last called.

This is super useful for:

Typing in input fields
Window resizing
Rapid clicking

Without debouncing, each keystroke can fire an API call. That’s a lot of unnecessary traffic!

Real-Life Use Case

You’re building a postal code search.

User types 800001 — should we fire six API calls? NO!

Instead, wait a little after the last keystroke → only fire one request.

Basic Setup (Without Debounce)

import axios from "axios";
import React from "react";

export default function App() {
  const setInput = (value) => {
    axios.get(`https://api.postalpincode.in/pincode/${value}`)
      .then((res) => {
        console.log(res.data[0]?.PostOffice[0]);
      });
  };

  return (
    <div>
      <input
        placeholder="Enter Pincode..."
        onChange={(e) => setInput(e.target.value)}
      />
    </div>
  );
}

Problem: Every keypress hits the API. Not efficient.

Debouncing with `setTimeout` + `useEffect`

Let’s optimize it!

1⃣ Add state

const [pinCode, setPinCode] = React.useState("");

2⃣ Update input on change

<input
  placeholder="Enter Pincode..."
  onChange={(e) => setPinCode(e.target.value)}
/>

3⃣ Debounce API call in `useEffect`

React.useEffect(() => {
  const timer = setTimeout(() => {
    if (pinCode) {
      axios.get(`https://api.postalpincode.in/pincode/${pinCode}`)
        .then((res) => {
          console.log(res.data[0]);
        });
    }
  }, 2000); // 2 second debounce

  return () => clearTimeout(timer);
}, [pinCode]);

Now the API call triggers only after user stops typing for 2 seconds.

Full Working Code

import axios from "axios";
import React from "react";

export default function App() {
  const [pinCode, setPinCode] = React.useState("");

  React.useEffect(() => {
    const timer = setTimeout(() => {
      if (pinCode) {
        axios
          .get(`https://api.postalpincode.in/pincode/${pinCode}`)
          .then((res) => {
            console.log(res.data[0]);
          });
      }
    }, 2000);

    return () => clearTimeout(timer);
  }, [pinCode]);

  return (
    <div>
      <input
        placeholder="Enter Pincode..."
        onChange={(e) => setPinCode(e.target.value)}
      />
    </div>
  );
}

Now typing 800001 triggers just one API call!

Where Else Can You Use Debouncing?

Search Bars
Form Auto-save
Resize Listeners
Button Clicks

Bonus: Use `lodash.debounce` for Cleaner Code

Install it:

npm install lodash.debounce

Use it:

import debounce from "lodash.debounce";

const debouncedFetch = debounce((value) => {
  axios.get(`https://api.postalpincode.in/pincode/${value}`).then(...);
}, 2000);

This makes your code reusable and cleaner!

Is Debouncing Making Your App Feel Slow?

That’s a good observation! Here’s the deal:

Pros:

Prevents API spamming
Smooths out performance
Saves server resources

Cons:

Adds a perceived delay to the response
Not ideal when users expect instant feedback

My Take:

If your use case involves:

Heavy API calls
User typing/searching → Use shorter debounce delays (e.g., 300-500ms)

Use 2000ms only when response is non-urgent or API is expensive.

Final Thoughts

Debouncing is a must-know for every developer.

It helps create apps that are efficient, responsive, and smooth.

So next time your UI lags behind your API — debounce it, don’t spam it!

Stay Connected

If this helped you out, drop a or below!

Happy Coding!

Let me know — I’d love to help you make this article shine even more!