Example useEffect cleanup function?

[stevenharderjr]

The map is initialized via useEffect, but there is no cleanup function in the example code. Am I missing something?

[MALDRU]

export const Map = ({ center, zoom, onLoad }) => {
  const ref = useRef()

  const callback = status => {
    if (status === Status.SUCCESS) {
      const map = new window.google.maps.Map(ref.current, {
        center,
        zoom,
      })
      onLoad && onLoad(map)
    }
  }

  return (
    <>
      <MapContainer ref={ref} />
      <Wrapper apiKey={googleMapsKey} callback={callback}></Wrapper>
    </>
  )
}

[deAtog]

This example is poorly written. The component creates a new instance of the google.maps.Map object on every render of the component. Google charges for every instance created.

function MyMapComponent({
  center,
  zoom,
}: {
  center: google.maps.LatLngLiteral;
  zoom: number;
}) {
  const ref = useRef();

  useEffect(() => {
    new window.google.maps.Map(ref.current, {
      center,
      zoom,
    });
  });

  return <div ref={ref} id="map" />;
}

Here is an improved version that only creates one instance of the google.maps.Map object:

function MyMapComponent({
  center,
  zoom,
}: {
  center: google.maps.LatLngLiteral;
  zoom: number;
}) {
  const ref = useRef();
  const [map, setMap] = useState();

  // Note the explicit empty array for dependencies here.
  // This ensures that this effect will only run ONCE after the first render.
  useEffect(() => {
    // MapOptions here aren't strictly necessary here, but may reduce initialization
    const map = new window.google.maps.Map(ref.current, {
      center,
      zoom,
    });

    setMap(map);
  }, []);

  useEffect(() => {
    if (!map) return;

    map.setZoom(zoom);
  }, [map, zoom]);

  useEffect(() => {
    if (!map) return;

    map.setCenter(center);
  }, [map, center]);

  return <div ref={ref} id="map" />;
}

[usefulthink]

@deAtog thanks! Would you be able to quickly put that into the README and create a PR for it?

[usefulthink]

I updated the example in #854