Implement useDebounce Custom Hook in React (Interview)

In frontend development, optimizing performance is crucial to ensure a smooth user experience. One most common performance optimization technique is debouncing, which delays the execution of a function until a certain amount of time has passed without additional calls.

In this blog, will understand the implementation of useDebounce() custom hook in react

Let's quickly understand the Debouncing?

Debouncing is a process where a function call is delayed until after a specified time interval has elapsed. This is helpful in scenarios where a function is repeatedly called (e.g., in response to user input), but we want to wait for a pause before triggering the actual action.

For example search or filtering functionalities where result data is populated using API calls.

Implementing useDebounce Custom Hook

To implement a custom hook for debouncing in a React application, we can create a useDebounce hook that delays the execution of a function until a certain amount of time has passed.

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

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedValue(value);
        }, delay);

        return () => {
            clearTimeout(handler);
        };
    }, [value, delay]);

    return debouncedValue;
};

useDebounce Hook usage in component

Now, let's see how we can use the useDebounce hook in a functional component

const MyComponent = () => {
    const [searchTerm, setSearchTerm] = useState('');
    const debouncedSearchTerm = useDebounce(searchTerm, 500);

    useEffect(() => {
        // Make API call with debounced search term
        // For example: fetchResults(debouncedSearchTerm);
    }, [debouncedSearchTerm]);

    return (
         setSearchTerm(e.target.value)}
            placeholder="Search..."
        />
    );
};

Real-World Example

Let's consider a real-world scenario where we have a search input field that triggers an API call to fetch search results. By debouncing the search input, we can reduce unnecessary API calls and improve the overall performance of our application.

Code Example

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

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

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedValue(value);
        }, delay);

        return () => {
            clearTimeout(handler);
        };
    }, [value, delay]);

    return debouncedValue;
};

// Use custom hook
const SearchResults = () => {
    const [searchTerm, setSearchTerm] = useState('');
    const debouncedSearchTerm = useDebounce(searchTerm, 500);

    useEffect(() => {
        // Simulated API call
        const fetchResults = async (query) => {
            console.log('Fetching results for:', query);
            // Make API call here
        };

        fetchResults(debouncedSearchTerm);
    }, [debouncedSearchTerm]);

    return (
         setSearchTerm(e.target.value)}
            placeholder="Search..."
        />
    );
};

export default SearchResults;

Conclusion

Implementing a custom useDebounce hook in React can significantly improve the performance of your react  application by reducing unnecessary API calls and optimizing user interactions.

Understanding the implementation and its real-life usage will help you to include useDebounce in your machine coding interview or also help you in your react interviews as well.

Further Reading

1. Top 20 Most Asked Custom Hooks in React
2. Best Resources to prepare for Frontend React Interview