Mastering Debounce in ReactJS

Picture this: you're typing in a search bar, and with every letter you type, a function is fired off. Now, what if you're typing really fast? Those functions start to pile up, potentially causing chaos in your web app and making it slow. How do we handle this madness? Enter the superhero technique called "debouncing."

The Problem: Unwanted Function Overload

Imagine you have a function that gets called every time you type a letter. If this function is doing something complex, like searching a database, and you're typing quickly, you might overload your system with too many searches. This could lead to a sluggish and unresponsive user interface – not a great experience.

// case without debounce

return (
    <input
      type="text"
      placeholder="Search..."
      value={value}
      onChange={(e)=>{
        setValue(e.target.value);
        console.log("Called every time input changes")
        // API call here
        }}
    />
);

What is Debounce?

Debouncing is like saying, "Hey, before you run that function, let's wait a bit to see if there are more letters coming." It's like telling your function, "Hold your horses, don't run just yet." If more letters come in quickly, you reset the timer. Only when the typing stops for a moment, does the function get the green light to run.

It is a technique used to ensure that time-consuming tasks do not fire so often, particularly in response to rapid events.

How Debounce Works:

You start typing: You're typing a message. Each time you hit a key, a function gets ready to do something.
A timer is set: Now, instead of immediately doing something, a small timer is started. It's like saying, "Hold on, let's see if more typing is coming."
Keep typing within the delay: If you keep typing within that delay period, the timer keeps resetting. It's like telling the timer, "Wait, wait, they're still typing – give them a bit more time."
Pause typing: When you finally stop typing, that's when the function gets the green light. It says, "Okay, they're done typing. Now, let's do that something."

So, debouncing is like telling your function, "Don't rush, wait a moment. If more typing is happening, hold off. Only do your thing when there's a little break in the typing action." It's a handy way to manage things when you're dealing with a flurry of keyboard activity!

Debounce in ReactJS:

Let's take a peek at a simple example of using debounce in a React search input.

import React, { useState } from 'react';

const DebouncedInput = () => {
  const [searchTerm, setSearchTerm] = useState('');

  const debounceSearch = (query) => {
    // Debounce logic here (using setTimeout)
    // Execute search only if no new input within 300 milliseconds
    setTimeout(() => {
      console.log('Searching for:', query);
      // Add your actual search logic here, like API calls 
      // and other time taking task
    }, 300);
  };

  const handleChange = (e) => {
    const newSearchTerm = e.target.value;
    setSearchTerm(newSearchTerm);
    debounceSearch(newSearchTerm);
  };

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

export default DebouncedInput;

In this example, the function that handles the search waits for 300 milliseconds after the last keystroke before jumping into action.

Conclusion

By using debouncing in your React components, you can keep the functions under control, ensuring a smoother and more enjoyable user experience. It's like having a traffic cop for your functions – preventing chaos and maintaining order.

Thank you for reading this blog 🙏, I hope this blog added to your knowledge.