Resium Duplicates KML while in React StrictMode

[TMarche]

I've encountered an issue with Resium in StrictMode on the following Resium versions:

• 1.16.1
• 1.17.1

Resium will duplicate KML while in StrictMode.

Steps to Replicate

These are the steps I used to replicate the issue.

1. Run npx create-react-app test-resium-duplication --template typescript
2. Inside the test-resium-duplication project, run npm install --save @craco/craco craco-cesium cesium resium@1.17.1
3. Follow steps 3 and 4 here to set up craco

4. Replace the code in App.tsx with the following:

   function App() {
   const kmlBlob = new Blob([
   '<kml xmlns="http://earth.google.com/kml/2.1"><GroundOverlay><color>55ffff</color><name>Region</name><LatLonBox><north>45</north><south>25</south><east>-80</east><west>-100</west></LatLonBox></GroundOverlay></kml>'
   ])
   
   return (
   <Viewer>
     <KmlDataSource
       data={kmlBlob}
     />
   </Viewer>
   );
   }

5. Start the app
6. Open the React DevTools "Components" tab
7. In the Components tab, navigate to App > Viewer > Context.Provider
8. With Context.Provider Selected, select props > value > viewer > _dataSourceCollection > _dataSources
9. When in StrictMode, under _dataSources you will see:
10. Disable StrictMode (remove the React.StrictMode tags from index.tsx). Under _dataSources you will see:

[TimonSotiropoulos]

+1 for this!

I am getting an entire duplication of the <Viewer></Viewer> component when using React.StrictMode on a brand new project.

[vxlk]

Bump. Getting the same issue.

[akHend22]

+1, same issue.

[prusswan]

The issue happens to all layers(?) under Viewer. I was wondering why onLayerAdd (under ImageryLayerCollection) was triggered 4 times for every layer