Bad practice in OverlayView

[zolero]

Really bad practice in the OverlayView component for performance reasons. Why?

In the draw method every map movement it will re-append the this.containerElement and re-render the react component.

The appendChild() function should be in onAdd() and the unstable_renderSubtreeIntoContainer() function should be in render() method of the React Component.

This resulted in a huge performance different on our projects. Maybe someone could change this class so everyone can enjoy of the performance boost! I'm having issues to create a pull request because of styling problems.

For more information: https://developers.google.com/maps/documentation/javascript/customoverlays

react-google-maps/src/macros/OverlayView.jsx

Lines 89 to 106 in ca5c5c6

	draw() {
	const { mapPaneName } = this.props
	invariant(
	!!mapPaneName,
	`OverlayView requires either props.mapPaneName or props.defaultMapPaneName but got %s`,
	mapPaneName
	)
	// https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapPanes
	const mapPanes = this.state[OVERLAY_VIEW].getPanes()
	mapPanes[mapPaneName].appendChild(this.containerElement)
	ReactDOM.unstable_renderSubtreeIntoContainer(
	this,
	React.Children.only(this.props.children),
	this.containerElement,
	this.onPositionElement
	)
	}

[nickpolet]

I've noticed the OverlayView having particularly bad performance as well. Works fine with the native google maps, but the same number of OverlayViews in this component results in drastically poor performance.

[molimauro]

@zolero Great hint thanks. The performance of my map drastically increased just by moving the appenChild in the onAdd function. However I'm facing some issues in moving the unstable_renderSubtreeIntoContainer in the render function. How did you manage to do this? Thanks a lot.

[JustFly1984]

@molimauro
The repo of this project is unmaintained more than a year, and we had build new version https://www.npmjs.com/package/@react-google-maps/api

We had rewrite it to TypeScript, and updating it frequently: https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api
You can enjoy autocomplete.

You can see our docs: https://react-google-maps-api-docs.netlify.com/

Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.com/ https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api-gatsby-example/src/examples

The bundle size is much smaller: https://bundlephobia.com/result?p=@react-google-maps/api

Enjoy!


[molimauro]

@JustFly1984 Yeah I'm aware of it (thanks for your work) and I'm planning the switch in the future, now unfortunately I can't.
Regarding this problem, I've noticed that also in your library you call 'appendChild' in the 'draw' function of the OverlayView, so please consider moving it in the 'add' function instead. It'll give you a boost in terms of performance, and me another reason to switch to your library :)
Thanks!!