useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(
`https://api.binance.com/api/v3/ticker/price`,
);
const data: BinancePair[] = await response.json(); // Explicitly annotate the data type
// Filter the results for symbols quoted in USDT
const usdtPairs = data.filter((pair: BinancePair) =>
pair.symbol.endsWith('USDT'),
);
setUsdtPairs(usdtPairs);
console.log(usdtPairs);
setLoading(true);
} catch (error) {
console.error('Error fetching data:', error);
setLoading(true);
}
};
fetchData();
}, []);
This is my code and the response array is too big and takes forever to display in my react native application, can we add some type of limit to this API so that we get 20 objects at first and then we have a load more button and by clicking that we get 20 more objects.
I tried various solutions to paginate on frontend but the load time was still too high
2
Answers
Please check if that api is providing any inbuilt limiting logic ,
like this
/api/data?page=1&pageSize=10.According to Symbol Price Ticker – Binance API Documentation you can either select all tickers, as you do right now.
Select one ticker with
?symbol=LTCBTCquery parameter.Or select several tickers with
?symbols=["LTCBTC","BNBBTC"]query parameter.As one way to paginate those, you can save all ticker names in your app and request 5-10 names per request with
?symbols=query parameter.