fix: memoize context-values to avoid excessive re-renders (#287)

Add memoization to all context values used internally.
Without the memoization, the context value of e.g. the GoogleMapsContext (used to retrieve the map-instance in the `useMap` hook) will register as changed every time the map-component re-renders, causing all children that use the context (for example via the `useMap` hook) to re-render as well.
With the memoization in place, these unnecessary renders will no longer happen.

fixes #285

Author: usefulthink

src/components/advanced-marker.tsx

@@ -6,6 +6,7 @@ import React, {
   useContext,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useState
 } from 'react';
 
@@ -147,14 +148,17 @@ export const AdvancedMarker = forwardRef(
     const {children} = props;
     const [marker, contentContainer] = useAdvancedMarker(props);
 
+    const advancedMarkerContextValue: AdvancedMarkerContextValue | null =
+      useMemo(() => (marker ? {marker} : null), [marker]);
+
     useImperativeHandle(ref, () => marker, [marker]);
 
     if (!marker) {
       return null;
     }
 
     return (
-      <AdvancedMarkerContext.Provider value={{marker}}>
+      <AdvancedMarkerContext.Provider value={advancedMarkerContextValue}>
         {contentContainer !== null && createPortal(children, contentContainer)}
       </AdvancedMarkerContext.Provider>
     );

src/components/api-provider.tsx

@@ -188,17 +188,29 @@ export const APIProvider = (
   const {status, loadedLibraries, importLibrary} =
     useGoogleMapsApiLoader(loaderProps);
 
+  const contextValue: APIProviderContextValue = useMemo(
+    () => ({
+      mapInstances,
+      addMapInstance,
+      removeMapInstance,
+      clearMapInstances,
+      status,
+      loadedLibraries,
+      importLibrary
+    }),
+    [
+      mapInstances,
+      addMapInstance,
+      removeMapInstance,
+      clearMapInstances,
+      status,
+      loadedLibraries,
+      importLibrary
+    ]
+  );
+
   return (
-    <APIProviderContext.Provider
-      value={{
-        mapInstances,
-        addMapInstance,
-        removeMapInstance,
-        clearMapInstances,
-        status,
-        loadedLibraries,
-        importLibrary
-      }}>
+    <APIProviderContext.Provider value={contextValue}>
       {children}
     </APIProviderContext.Provider>
   );

src/components/map/index.tsx

@@ -172,6 +172,8 @@ export const Map = (props: PropsWithChildren<MapProps>) => {
     [style, isDeckGlControlled]
   );
 
+  const contextValue: GoogleMapsContextValue = useMemo(() => ({map}), [map]);
+
   if (loadingStatus === APILoadingStatus.AUTH_FAILURE) {
     return (
       <div
@@ -190,7 +192,7 @@ export const Map = (props: PropsWithChildren<MapProps>) => {
       className={className}
       {...(id ? {id} : {})}>
       {map ? (
-        <GoogleMapsContext.Provider value={{map}}>
+        <GoogleMapsContext.Provider value={contextValue}>
           {children}
         </GoogleMapsContext.Provider>
       ) : null}