Why would onLoad be called twice?

[thepuzzlemaster]

I've got a <GooglMap /> instance inside a nextjs application.

When it renders in browser, onLoad is firing twice, with a different instance each time.
I don't think this should be happening, but I can't figure out what would be causing it. I've removed all of the extra stuff going on in my component, but it's still calling onLoad twice.
I'm left with this.
Does anyone know what might cause this?

<div>
  {isLoaded ? (
    <GoogleMap
       center={MilwaukeeLatLng}
       onLoad={onMapLoad}
       onUnmount={onMapUnmount}
     >
     </GoogleMap>
        ) : (
          <></>
        )}
      </div>

My isLoaded prop comes from a different file.

const GoogleMapsLibraries: LoadScriptProps['libraries'] = ['geometry']
const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: ENV.GOOGLE_API_KEY,
    libraries: GoogleMapsLibraries,
  })

[lovedeep5]

center={MilwaukeeLatLng} for center if you are using object of lat lng try to memorize that.

[thepuzzlemaster]

Thanks for taking a look. The MilwaukeeLatLng is a const defined outside the scope of the React function component, so it should be a consistent Object. Although even if it were defined as a new object each render, while I could see that causing additional unnecessary renders, I wouldn't expect that to trigger additional calls to onLoad.

However, after re-reading my symptoms and your comment, you've given me the thought that this must be happening higher up in my render tree. There's got to be some parent of the my component that is causing it to render an entirely new instance of my component, and thus an entirely new instance of the GoogleMap component as well. I'm going to pull on that thread a bit and see what I can uncover.

[thepuzzlemaster]

Ugh.... Found the reason.
It's related to React 18 strict mode and dev mode.
https://stackoverflow.com/questions/71847778/why-my-nextjs-component-is-rendering-twice
https://legacy.reactjs.org/docs/strict-mode.html#ensuring-reusable-state