Entprellen in ReactJS ⇐ HTML

[Guest]

Ich versuche, Debounce in meiner Sucheingabe in React zu implementieren. Der folgende Code verursacht die Verzögerung, wird aber genauso oft ausgelöst.
Beispiel – Wenn ich in weniger als 2 Sekunden (Verzögerung) abcd eingebe, sollte mein entprellter Wert sein abcd Stattdessen erhalte ich eine Konsole mit allen Werten-

Code: Select all

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

Ich gehe davon aus, dass, wenn ich abcd eingebe, in diesem Fall ein einzelner Aufruf anstelle von 4 erfolgen sollte.
< strong>Code -

Code: Select all

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}


);
}

Lassen Sie mich wissen, wenn ich hier etwas mit dem Code oder meinem Verständnis von Debounce falsch mache.