React Custom Debounce Hook Cleartimeout не работает ⇐ Javascript

[Anonymous]

У меня есть следующий пользовательский крючок: < /p>

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

import { useEffect, useRef } from 'react';

export const useDebounce = (cb: Function, timeout: number) => {
const timeoutRef = useRef(null);

useEffect(() => {
return () => {
clearTimeout(timeoutRef.current);
};
}, []);

return (...args) => {
if (timeoutRef.current) {
console.log('clearing timeout', timeoutRef.current)
clearTimeout(timeout);
timeoutRef.current = null;
}

timeoutRef.current = setTimeout(() => {
console.log('callback invoked')
cb(...args);
}, timeout);

console.log('latest', timeoutRef.current)
};
};
< /code>
и ниже компонент: < /p>
const CountriesList = () => {

const [inputValue, setIinputValue] = useState('');
const [countries, setCountries] = useState([]);

const apiCall = useCallback(async (input: string) => {
const response =  await fetch(`https://.../practice/countries/${input}`);
},[]);

const debouncedApiCall = useDebounce(apiCall, 5000);

useEffect(() => {
inputValue && debouncedApiCall(inputValue);
}, [inputValue]);

const handleInput= (e: React.ChangeEvent) => {
const value = e.target.value;
setIinputValue(value);
}

return (

 {handleInput(e)}} />

);
};
< /code>
Я ожидал линии < /p>
if (timeoutRef.current) {
console.log('clearing timeout', timeoutRef.current)
clearTimeout(timeout);
timeoutRef.current = null;
}
< /code>
Чтобы очистить существующие тайм -ауты, прежде чем начать новый. Но когда я запускаю этот код, после и iTerval, я получаю n -количество вызовов API, например, если я набрал 6 символов, я получаю 6 вызовов API. ClearTimeOut (Timeout); 

очистка существующих тайм -аутов? Я только ожидал, что последний будет стрелять.


Подробнее здесь: https://stackoverflow.com/questions/794 ... ot-working