/
Percival
/
reactJS_course
Обзор
Документация
Войти
/
Percival
/
reactJS_course
Код
Запросы
4
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
task5
task_1_fsd/src/features/refExamples/DebouncedLogger.tsx
40 строк
934 B
Rituparn
Added the 5th task
26 окт 2025, 19:34
26 окт 2025, 19:34
72790f9
Код
Авторство
О чём код?
import React, { useState, useRef, useEffect } from 'react'; export const DebouncedLogger = () => { const [inputValue, setInputValue] = useState(''); const timeoutRef = useRef<number | null>(null); const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { const value = e.target.value; setInputValue(value); if (timeoutRef.current) { clearTimeout(timeoutRef.current); } timeoutRef.current = setTimeout(() => { console.log(`Debounced log: ${value}`); }, 1000); }; useEffect(() => { return () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); } }; }, []); return ( <div> <h3>DebouncedLogger</h3> <input type="text" value={inputValue} onChange={handleChange} placeholder="Type something..." /> <p>Text will be logged 1 second after you stop typing</p> </div> ); };