How to optimise react-native-maps performance?

Question

I follow this to setInterval update every 200ms.

My code is here on Snack

( I cant add react-native-maps. I check expo's docs and the example is not working, too)

Problem is: When setInterval run, if data.length < 200, app still run smoothly. But if data.length > 200, every 200ms, I setState timer once, then I prop timer to VehicleMarker and make marker run from data[timer - 1] to data[timer]. Although I use React.memo but it still seems to be re-rendering so many times ( data.length times ) because tripIndex changes. So it make app lagging because it have to load data.length times MapView.

This is demo video.

Felder

It looks like you could be calling CarTrip.map every time your render function is called. So one thing you may want to do is compute that and store it in state instead. I'm not sure if theres a way to optimize your map in a way that it can handle many many markers but you could always reduce the number of markers you show on the maps. For example, maintain your full list of CarTrip but compute and render a sublist of every Nth CarTrip such that you can maintain less than 200 markers – Octoroon

@Octoroon I'm trying with your method but I'm not sure how to deal with this array @@ I basically can't break it down because I'm doing a review of the car's journey, if the car goes away the data is huge. and if I split the array, I still have to let the arrays run continuously. so can you give me more suggestions on how to handle it? – Felder

Answer 1

My temporary solution is using React.useRef and bring the interval inside child to reduce re-render in parent.

Felder