Дебютировать в Reactjs ⇐ Html

[Anonymous]

Я пытаюсь реализовать в своем вводе поиска в React. Приведенный ниже код вызывает задержку, но его запускают одинаковое количество раз.

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

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}


);
}

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

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