Почему моя функция дебюра не работает правильно внутри компонента? ⇐ Javascript

[Anonymous]

Я пытаюсь реализовать функцию дебайта в компоненте React, чтобы предотвратить несколько вызовов API, в то время как пользователи типы в поле ввода поиска. < /p>
Вот функция дебауна, которую я использую: < /p>

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

function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
< /code>
И именно так я использую его в своем функциональном компоненте React: < /p>
import React, { useState } from 'react';

function SearchComponent() {
const [query, setQuery] = useState('');

const handleChange = (e) => {
setQuery(e.target.value);
debouncedSearch(e.target.value);
};

const debouncedSearch = debounce((val) => {
console.log('Searching for:', val);
// Simulate API call here
}, 500);

return ;
}

wrapping debouncedsearch с usecallback
Перемещение функции дебюра за пределами объема компонента (который работает, но не имеет напряжения доступа к состоянию компонента).
Используя внешние библиотеки, такие как Lodash.debounce, но все еще обращается>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -component