Implement useDebounce Custom Hook in React (Interview)

In frontend development, optimizing performance is crucial to ensure a smooth user experience. One common optimization technique is debouncing, which delays the execution of a function until a certain amount of time has passed without additional calls. This is particularly useful when dealing with user input and API calls.

What is 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.

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.

Step 1: Create the useDebounce Hook

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

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

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

    return debouncedValue;
};
    

Step 2: Using the useDebounce Hook

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;
};

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 hook like useDebounce in React can significantly improve the performance of your application by reducing unnecessary API calls and optimizing user interactions. By delaying the execution of functions until after a specified delay, you can create a more responsive and efficient frontend experience.

Further Enhancements

For further enhancements, you can explore additional features such as throttling, where a function is executed at a regular interval instead of waiting for a pause. This can be useful in scenarios where you want to limit the frequency of function calls.

Experiment with different debounce delays and observe the impact on your application's performance to find the optimal balance between responsiveness and efficiency.