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!

P.S. You can find the visual here

Hokusai

why-did-you-update might give you a hint why is your component updated and re-rendered – Jumbuck

And there is a lifecycle event for React component shouldComponentUpdate where you can control when you want component to update. – Jumbuck

I'd probably help if we could see fetchData and the surrounding <MapView> tag with props. – Eight

I also need help with this – Troupe

did you find any solution @Neal Karpe? – Jalap

Answer 1

You can use a custom class component instead of MapView.marker, then use the componentShouldUpdate() function to specify if the marker needs to update under certain conditions.

Boz