optimize to mark with react-google-maps

Question

I'm currently develop GoogleMap page with react-google-maps.
My code like following

class GoogleMapBox extends React.Component{
    state = {
        center : this.props.center,
        places : []
    }

    mapMounted = ((ref) => {
        this.map = ref;
    })

    getPlaces = (() => {
        const center = this.map.getCenter();

        if(this.map.getZoom() >= 15){
            const bounds = this.map.getBounds();
            const minLatLng = bounds.getSouthWest();
            const maxLatLng = bounds.getNorthEast();

            ajaxCall(/*apiUrl*/, {
                /*param*/
                minLat : minLatLng.lat(),
                        minLng : minLatLng.lng(),
                        maxLat : maxLatLng.lat(),
                        maxLng : maxLatLng.lng(),
            })
            .then((result) => {
                this.setState({
                    center,
                    places : result.list
                })
            });

        } else {
            this.setState({
                center,
                places : []
            })
        }
    })

    render(){
        return (
            <GoogleMap
                ref={this.mapMounted}
                center={this.state.center}
                zoom={15}
                options={{
                    minZoom : 6,
                    maxZoom : 18
                }}

                onTilesLoaded={this.getPlaces}
            >

                <MarkerClusterer onClick={this.openMultiWindow}>
                    {this.state.places.map((i) => (
                        <Marker key={i.id} position={{ lat : i.lat, lng : i.lng}} onClick={this.openWindow}/>
                    ))}
                </MarkerClusterer>

            </GoogleMap>
        );
    }
}

But unfortunately, It is very slow and sometimes it stop....
The reason I think is result quantity of api result.
ajaxCall in getPlaces function return 100 ~ 2000 rows.

yeah... if ajax returns more than 500 rows, it might be very slow or stop.
But I have to show all of the result.

So how can I optimize this class?
I really don't know how to do...

This is sample result.. I have to show like this every time.
Please help me !!

Answer 1

I would suggest moving this code outside the render

                <MarkerClusterer onClick={this.openMultiWindow}>
                    {this.state.places.map((i) => (
                        <Marker key={i.id} position={{ lat : i.lat, lng : i.lng}} onClick={this.openWindow}/>
                    ))}
                </MarkerClusterer>

Then create a component that returns null till you have finished looping the ajax resultset. So there will be 1 render for all the markers instead of 1 render for each marker added.

There is also an open issue that matches your scenario.

Performance issue dynamically adding many markers #495

https://github.com/tomchentw/react-google-maps/issues/495