Senior Frontend Developer

Approach: Implement a custom hook that uses useState and useEffect to debounce a value.

Key Concepts: Custom hooks, useEffect cleanup, setTimeout, state management

Implementation:

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  
  useEffect(() => {
    // Set up a timer to update the debounced value after the specified delay
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    
    // Clean up function that clears the timer if value changes before the delay period
    // This is crucial for proper debouncing behavior
    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]); // Re-run effect when value or delay changes
  
  return debouncedValue;
}

// Example usage:
// const [searchTerm, setSearchTerm] = useState('');
// const debouncedSearchTerm = useDebounce(searchTerm, 500);
// 
// useEffect(() => {
//   // Only call API when debouncedSearchTerm changes
//   if (debouncedSearchTerm) {
//     fetchSearchResults(debouncedSearchTerm);
//   }
// }, [debouncedSearchTerm]);

Key Points to Explain:

• The hook returns a state value that only updates after the specified delay
• The cleanup function in useEffect is essential for debouncing - it cancels the previous timeout if the value changes before the delay completes
• This pattern is commonly used for search inputs, form validation, and other scenarios where you want to limit the frequency of operations
• The implementation is simple yet efficient, following React best practices for hooks