I am having issues passing updated values to an useCallback hook that facilitates debouncing that is located in an onChange handler. This useCallback method is polling as well.
Here is the useCallback hook that has the api call:
const handleDebounceCurrencyAmount = useCallback((currencyPair, amount) => {
getSwapPrice(currencyPair, amount || 0)
.then((res) => {
if (!res.price) {
setIsLoading(true);
} else {
setIsLoading(false);
}
setSwapPriceInfo(res);
if (res.error) {
setErrorMessage(res.error);
}
});
}, [baseAsset, quoteAsset, transactionType]);
And here is the useEffect that is polling that info:
useEffect(() => {
handleDebounceCurrencyAmount();
const timer = setInterval(handleDebounceCurrencyAmount, 6000);
return () => clearInterval(timer);
}
}, [baseAsset, quoteAsset]);
And here is where it takes in the amount and currencyPair as arguments:
const handleAssetAmount = (e) => {
const { value } = e.target;
const formattedAmount = handleAssetAmountFormat(value);
setFromCurrencyAmount(formattedAmount);
validateAmount(formattedAmount);
debouncedApiCallForAmount(pair, formattedAmount);
};
However, the arguments are not updating and is staying the same. I was searching online for any solutions but none have the same use case as i do where I am debouncing that useCallback method.
--------------------------------UPDATE------------------------------
So it seems like the argument gets passed, however, since I am polling the endpoint, its getting reset back to undefined on the next api call