react-native-maps: How do I add markers without re-rendering the entire map?

Question

I'm building a map that displays markers to show the location of nearby merchants. I'm passing a 'data' array as props to the map. I've set an interval such that every two seconds, I fetch more merchants from my API, and the 'data' array grows.

I'm fetching the data inside componentWillReceiveProps. fetchData() appends more merchants to the data array.

componentWillReceiveProps(nextProps) {
    if(nextProps.loading == false) {
        setTimeout(nextProps.fetchData,2000);
    }

And inside my MapView component -

{
    this.props.data.length > 0 && this.props.data.map(merchant => (
        <MapView.Marker
            coordinate={{latitude: Number(merchant.latitude), longitude: Number(merchant.longitude)}}
            title={merchant.name}
            description={merchant.address}
            identifier={"" + merchant.id}
            key={merchant.id}
        />
    ))
}

My problem: Whenever I call fetchData(), the new markers are rendered. However, the whole map is rendered again. I do not want this kind of blinking behaviour.

I'd be very grateful for any kind of help/suggestions. Thanks in advance!

PS You can find the visual here

Answer 1

您可以使用自定义类组件代替MapView.marker ，然后使用componentShouldUpdate()函数来指定标记是否需要在某些条件下更新。