Отладка в ReactJS ⇐ Html

[Anonymous]

Я пытаюсь реализовать устранение дребезга при вводе поиска в React. Приведенный ниже код вызывает задержку, но он срабатывает одинаковое количество раз.
Пример. Если я набираю abcd менее чем за 2 секунды (задержка), мое значение для устранения дребезга должно быть abcd, вместо этого я получаю консоль со всеми значениями -

Код: Выделить всё

Debounced: a
Debounced: ab
Debounced: abc
Debounced: abcd

Я предполагаю, что если я наберу abcd, то в этом случае он должен выполнить один вызов вместо 4.
Код -

Код: Выделить всё

import { useState } from 'react';

function debounce(cb, delay) {
let timeoutId;
return function (...args) {
if (timeoutId) {
clearTimeout(timeoutId);
}

timeoutId = setTimeout(() => {
cb(...args);
}, delay);
};
}

export default function App() {
const [searchVal, setSearchVal] = useState('');
const [debounceVal, setDebounceVal] = useState('');

const debouncedChange = debounce((inputValue) => {
console.log('Debounced:', inputValue);
setDebounceVal(inputValue);
}, 2000);

const handleChange = (e) => {
const inputValue = e.target.value;
setSearchVal(inputValue);
debouncedChange(inputValue);
};

return (

Debounce





{debounceVal}


);
}

Дайте мне знать, если я делаю что-то не так с кодом или с моим пониманием проблемы дребезга.


Подробнее здесь: https://stackoverflow.com/questions/771 ... in-reactjs