This question of my is going to be little longer.
I am using react-native to develop a Trading Application. I have added native-base as a component library.
App uses live data feed from signalr server hosted on a desktop server.
That desktop server sends live market data from API provider and broadcasts that data to all connected mobile clients.
Now, problem is, when receiving that data on mobile, mobile screen becomes very slow for component and price update. And it sometime freezes whole application and I need to restart it again.
In my mobile application, I have a watchlist screen, which at first, loads saved stock name data from database in a FlatList and then connects to signalr server for receiving live data.
I then listen for data receive, and update the FlatList data with state update, so that live price reflects in the list. Sometime it works fine, but after some time of usage, it becomes slow and other GUI components also become slow.
Following is the code that receives and renders and updates the data in FlatList
proxy.on("msgreceived", (msg) => {
if (typeof this.state.watchlistsymboldata != "undefined") {
this.state.watchlistsymboldata.forEach((item) => {
if (item.Symbolid != undefined) {
if (item.Symbolid === msg.symbolid) {
//console.log(msg);
item.bidprice = parseFloat(msg.bidprice).toFixed(2);
item.bidqty = parseInt(msg.bidquantity);
item.askprice = parseFloat(msg.askprice).toFixed(2);
item.askqty = parseInt(msg.askquantity);
item.ltp = parseFloat(msg.ltp).toFixed(2);
item.open = parseFloat(msg.open).toFixed(2);
item.high = parseFloat(msg.high).toFixed(2);
item.low = parseFloat(msg.low).toFixed(2);
item.timetraded = msg.timestamp;
item.cellcolor = msg.cellcolor;
item.bidcolor = msg.bidcolor;
item.askcolor = msg.askcolor;
this.setState({updateState:true});//THIS IS NEEDED TO REFLECT CHANGES
}
}
});
}
});
How do I make this work smoother without any heavy load on the app? Thanks.