useDebounce Hook

Среднее

Создайте custom hook useDebounce для оптимизации поиска. Требования: ✓ Реализовать хук useDebounce, который принимает значение и задержку ✓ Хук должен возвращать debounced значение ✓ Значение обновляется только после истечения задержки ✓ При новом изменении таймер должен сбрасываться ✓ Продемонстрировать работу на примере поиска Критерии приемки: ✓ useDebounce принимает (value, delay) и возвращает debouncedValue ✓ Используется useEffect для управления таймером ✓ Cleanup функция очищает таймер при размонтировании ✓ В примере показано как debounce уменьшает количество запросов ✓ Отображается: введенное значение и debounced значение для сравнения

useDebounce Hook

Среднее

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