useDebounce Hook

Medium

Create a custom useDebounce hook for search optimization. Requirements: ✓ Implement useDebounce hook that accepts value and delay ✓ Hook should return debounced value ✓ Value updates only after delay expires ✓ Timer should reset on new changes ✓ Demonstrate usage with search example Acceptance Criteria: ✓ useDebounce accepts (value, delay) and returns debouncedValue ✓ Uses useEffect to manage timer ✓ Cleanup function clears timer on unmount ✓ Example shows how debounce reduces number of requests ✓ Display both: input value and debounced value for comparison

useDebounce Hook

Medium

Close file
Close file
import { useState } from 'react';
import './styles.css';

// Implement useDebounce hook here
function useDebounce(value, delay) {
  // Your code here
  return value; // Replace with debounced value
}

export default function App() {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  return (
    <div className="app">
      <h1>useDebounce Hook</h1>
      
      <div className="search-container">
        <input
          type="text"
          placeholder="Type to search..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="search-input"
        />
      </div>

      <div className="values">
        <div className="value-box">
          <strong>Input Value:</strong>
          <span>{searchTerm || '(empty)'}</span>
        </div>
        <div className="value-box">
          <strong>Debounced Value:</strong>
          <span>{debouncedSearchTerm || '(empty)'}</span>
        </div>
      </div>
    </div>
  );
}

Preview

Console