What is the proper way to utilize multiple useJsApiLoader hooks in different components?

[thepuzzlemaster]

Let's say I've got 2 components which both make api calls to the googleMaps api.

When this happens I get a console.warn about "Aborted attempt to load Google Maps JS with..."
I recognize that this is just a warning, and nothing bad has actually happened, but this warning logs every time I navigate to a page which utilizes one of the hooks after the first successful script load.

So I could move the hook up to a root level, and then perhaps set the isLoaded state in a React Context, so that it is accessible from nested components.

Or I could just ignore the warnings, since they're not really doing anything too bad.

Is there a proper thing to do here? I don't imagine I'm the only person who has encountered this issue.

Thanks for any insight.

[JustFly1984]

Does the warning comes from this lib, or sub dependency? If it is this lib, One could make some flag to silence warnings. PR is welcome. If warning originated in sub dependency, you can raise an issue there.

[thepuzzlemaster]

The warning comes from a sub dependency: https://github.com/googlemaps/js-api-loader/blob/master/src/index.ts#L475

I think the difference is the conversion of this library into using that sub-dependency as a hook, which is expected to run multiple times, whereas in the sub dependency, it is a stranger scenario for the code to execute multiple times.

Perhaps an optional flag could be added to the sub-dependency, which is then flipped by this library when utilizing it?

I'll ask about that in the js-api-loader lib.