import React, {
useState,
useEffect
} from
'react'
;
const InputComponent = () => {
const [inputValue, setInputValue] = useState(
''
);
const [debouncedValue, setDebouncedValue] = useState(
''
);
const [throttledValue, setThrottledValue] = useState(
''
);
useEffect(() => {
console.log(
'Input value changed:'
, inputValue);
const debounceTimer = setTimeout(() => {
console.log(`Debounce timer expired.
Updating debounced value:`, inputValue);
setDebouncedValue(inputValue);
}, 500);
return
() => {
console.log(
'Clearing debounce timer'
);
clearTimeout(debounceTimer);
};
}, [inputValue]);
useEffect(() => {
console.log(
'Input value changed:'
, inputValue);
const throttleTimer = setTimeout(() => {
console.log(`Throttle timer expired.
Updating throttled value:`, inputValue);
setThrottledValue(inputValue);
}, 1000);
return
() => {
console.log(
'Clearing throttle timer'
);
clearTimeout(throttleTimer);
};
}, [inputValue]);
const handleChange = (event) => {
console.log(
'Input value changing:'
,
event.target.value);
setInputValue(event.target.value);
};
return
(
<div>
<input type=
"text"
value={inputValue} onChange={handleChange}
placeholder=
"Type something..."
/>
<div>
<p>Debounced value: {debouncedValue}</p>
<p>Throttled value: {throttledValue}</p>
</div>
</div>
);
};
export
default
InputComponent;