Debouncing is a technique used to limit the rate at which a function is executed. It is typically used to handle user input in a way that avoids triggering a function (such as an API call) on every keystroke. Instead, the function is only triggered after the user has stopped typing for a specified amount of time.

In React, debouncing is useful when you have an input field where you want to wait for the user to finish typing before performing an action like a search or an API request, instead of triggering it on every keystroke.

How Debouncing Works:

Debouncing ensures that a function (e.g., an API request, search query, or state update) is executed only once after a specified delay, and it will reset the timer if the user continues typing. If the user stops typing for the specified time, the function is triggered.

Example of Debouncing Input in React:

1. Install Lodash (Optional): You can use a utility library like Lodash to handle debouncing with its debounce function, or you can implement your own.

   Install Lodash:

   npm install lodash


2. Using Lodash for Debouncing:

Here’s an example using Lodash’s debounce function:

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

function Search() {
const [query, setQuery] = useState('');

// Debounce the search handler
const handleSearch = debounce((value) => {
console.log('Searching for:', value);
// You can make an API call here or any action you'd like to debounce
}, 500); // 500ms delay after the user stops typing

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

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

export default Search;

Explanation:

• useState: Manages the input value (query).
• debounce: The debounce function from Lodash creates a debounced version of the handleSearch function. This means that the function will only be called after the user has stopped typing for 500ms.
• handleChange: On every keystroke, handleChange is triggered, but handleSearch is debounced, so it will only be executed after the specified delay.

Custom Debounce Hook:

If you don’t want to use Lodash, you can create your own custom hook to debounce the input:

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);

useEffect(() => {
// Set a timer to update the debounced value after the delay
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);

// Cleanup the timeout on component unmount or if value or delay changes
return () => {
clearTimeout(handler);
};
}, [value, delay]); // Re-run when value or delay changes

return debouncedValue;
}

function Search() {
const [query, setQuery] = useState('');
const debouncedQuery = useDebounce(query, 500); // Debounce with 500ms delay

useEffect(() => {
if (debouncedQuery) {
console.log('Searching for:', debouncedQuery);
// Here, you can make an API call or any other action when the debounced value changes
}
}, [debouncedQuery]);

const handleChange = (event) => {
setQuery(event.target.value);
};

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

export default Search;

Explanation:

• useDebounce: This custom hook manages the debounced value by setting a timeout when the value changes and clearing the timeout if it changes again before the delay is reached.
• debouncedQuery: This holds the final debounced value that only updates after the user has stopped typing for 500ms.

When to Use Debounce:

• Search Inputs: Avoid making an API request for every character typed by the user.
• Form Validations: Prevent validation logic from firing on every keystroke.
• Resizing or Scrolling Events: Debounce window resizing or scrolling events that might be fired rapidly.

Conclusion:

Debouncing is a useful technique for improving performance, especially for input fields and user interactions that trigger expensive operations, such as API requests. By delaying the execution until after the user stops typing or interacting, you can avoid unnecessary calculations and reduce the load on your application. You can use Lodash’s debounce function or create a custom hook to implement this behavior.