I am currently building a trading app in react native. The app uses websockets, meaning it connects to a websocket and gets data from it.
but now i have the problem when the wbesocket sends a lot of data the app is behind.
the websocket on the server sends live traing data of bitcoin transactions.
These transactions come in very fast called in millisecond intervals. Each time a transaction arrives it is added to an array and the state is updated via setState.
if the transactions come in very fast they are queued and the js part dropps do 3 fps. it eventually catches up but, thats not a good way for showing live data.
This array is then displayed in a FlatList.
Is this the limitation of react native? Is the java script bridge to slow for this kind of data speeds?
if (this.serverWebsocket.ws) {
this.serverWebsocket.ws.onopen = () => {
this.setState({loading: false});
};
this.serverWebsocket.ws.onmessage = (e) => {
// a message was received
this.addMarketTrade(e.data);
};
this.serverWebsocket.ws.onerror = (e) => {
// an error occurred
console.log(e.message);
};
this.serverWebsocket.ws.onclose = (e) => {
// connection closed
console.log(e.code, e.reason);
};
} addMarketTrade(marketTrade: MarketTrade) {
if (this.state.trades.length !== 50) {
this.state.trades.unshift(marketTrade);
} else {
this.state.trades.unshift(marketTrade);
this.state.trades.splice(-1);
}
this.forceUpdate();
} <FlatList
style={styles.scrollView}
keyExtractor={(item, index) => index.toString()}
data={this.state.trades}
removeClippedSubviews={true}
renderItem={({item}) => (
<TradeCard
marketData={item}
playBuy={() => {
this.playBuy();
}}
playSell={() => {
this.playSell();
}}
/>
)}
></FlatList>