Merge pull request #162 from yulinscottkang/v1/canvas

fix: double canvas in react 18 strict mode

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-azure-maps",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "React Wrapper for Azure Maps",
   "keywords": [
     "react",

src/components/AzureMap/AzureMap.tsx

@@ -1,5 +1,5 @@
-import React, { memo, useContext, useEffect, useState } from 'react'
-import atlas from 'azure-maps-control'
+import React, { memo, useContext, useEffect, useState, useRef } from 'react'
+import atlas, { Map } from 'azure-maps-control'
 import { IAzureMap, IAzureMapsContextProps, MapType } from '../../types'
 import { AzureMapsContext } from '../../contexts/AzureMapContext'
 import { Guid } from 'guid-typescript'
@@ -33,6 +33,7 @@ const AzureMap = memo(
       isMapReady
     } = useContext<IAzureMapsContextProps>(AzureMapsContext)
     const [mapId] = useState(providedMapId || Guid.create().toString())
+    const mapRefSource = useRef<Map | null>(null)
     useEffect(() => {
       if (mapRef) {
         mapRef.setTraffic(trafficOptions)
@@ -97,7 +98,10 @@ const AzureMap = memo(
     })
 
     useEffect(() => {
-      setMapRef(new atlas.Map(mapId, options))
+      if (mapRefSource.current === null) {
+        mapRefSource.current = new atlas.Map(mapId, options)
+      }
+      setMapRef(mapRefSource.current)
       return () => {
         removeMapRef()
       }