"use client"; import { useState, useEffect } from 'react'; import { useDebounce } from '@/components/hooks/use-debounce'; import { Input } from "@/components/ui/input"; // Simple Input Demo export function DebounceInputDemo() { const [inputValue, setInputValue] = useState(''); const debouncedValue = useDebounce(inputValue, 500); const [apiResult, setApiResult] = useState(''); useEffect(() => { // Имитация API запроса if (debouncedValue) { setApiResult(`Making API call with: ${debouncedValue}`); } }, [debouncedValue]); return (

Type something to see debounce in action

setInputValue(e.target.value)} placeholder="Start typing..." />

Current value:

{inputValue}

Debounced value:

{debouncedValue}

API Response:

{apiResult}

); } // Search Demo export function DebounceSearchDemo() { const [search, setSearch] = useState(''); const debouncedSearch = useDebounce(search, 500); const [results, setResults] = useState([]); const [isSearching, setIsSearching] = useState(false); // Имитация поиска useEffect(() => { if (debouncedSearch) { setIsSearching(true); // Имитация API запроса setTimeout(() => { setResults([ `Result 1 for "${debouncedSearch}"`, `Result 2 for "${debouncedSearch}"`, `Result 3 for "${debouncedSearch}"`, ]); setIsSearching(false); }, 1000); } else { setResults([]); } }, [debouncedSearch]); return (

Search with debounce

setSearch(e.target.value)} placeholder="Search..." />

{isSearching ? (

Searching...

) : ( results.map((result, index) => (

{result}

)) )}

); } // Counter Demo export function DebounceCounterDemo() { const [count, setCount] = useState(0); const debouncedCount = useDebounce(count, 1000); const [savedCounts, setSavedCounts] = useState([]); useEffect(() => { // Сохраняем значение только когда debouncedCount изменился if (debouncedCount > 0) { setSavedCounts(prev => [...prev, debouncedCount]); } }, [debouncedCount]); return (

Click rapidly to see debounce effect

Debounced count:

{debouncedCount}

Saved counts:

{savedCounts.map((savedCount, index) => ( {savedCount} ))}

); }