I have a base component as defined
import React, { useEffect, useState, useRef } from 'react';
import { GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';
// TODO: Create a resuable LzMap with styles injected and more
export function OverviewPage(props) {
// SOME UseEffect | Code etc
return (
<Box position="relative">
<LzMap
google={props.google}
zoom={zoom}
>
<InfoWindow
options={{ maxWidth: 250, minWidth: 150, disableAutoPan: true }}
ref={infoWindowRef}
></InfoWindow>
</LzMap>
// SOME MORE CODE
</Box>
);
}
export default GoogleApiWrapper({
apiKey: process.env.REACT_APP_GOOGLE_API_KEY
})(OverviewPage);
My LzMap component is defined as
import React, { useState, useRef } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Map } from 'google-maps-react';
import mapStyles from 'model/CRM_mapStyle.json';
const useStyles = makeStyles(theme => ({
}));
function LzMap({
children,
google,
zoom
}) {
const classes = useStyles({});
const [maps, setMaps] = useState(null);
const applyMapStyles = (mapProps, map) => {
map.setOptions({
styles: mapStyles
});
setMaps(map);
};
console.log("Rendering");
return (
<Map
containerStyle={{
position: 'relative',
width: '100%',
height: '93vh'
}}
onReady={(mapProps, map) => applyMapStyles(mapProps, map)}
fullscreenControl={false}
google={google}
zoom={zoom}
minZoom={3}
draggable
zoomControl={false}
controlSize={false}
scaleControl={false}
mapTypeControl={false}
streetViewControl={false}
>
{children}
</Map>
);
}
export default React.memo(LzMap);
I am trying to make not to re-render again and again. However re-rendering is happening again and again. What is the way I can stop this re-rendering to happen and only update children inside map component.
