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.

Answer 1

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