False performance warning about libraries

[si4dev]

I'm using a library with useLoadScript like this:

const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: GOOGLE_API_KEY,
    libraries: ['places'],
  });

And on rerender it always shows: Performance warning! Loadscript has been reloaded unintentionally! You should not pass libraries prop as new array. Please keep an array of libraries as static class property for Components and PureComponents, or just a const variable outside of component, or somewhere in config files or ENV variables

I've reviewed the code and it seems to use wrong comparison for arrays. When I change libraries !== prevLibraries.current into JSON.stringify(libraries) !== JSON.stringify(prevLibraries.current) then it works as expected without performance warnings. However the real solution is probably more complex as the useEffect shouldn't trigger on the array libraries as it is not changed.

[si4dev]

Reading more on useEffect() and the hints in the warning learned me to define libraries outside the functional component like this:
const libraries = ['places'];

And then use this

const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: GOOGLE_API_KEY,
    libraries,
  });

which will prevent useEffect() from triggering each rerender. So with this my issues is solved.

[tonyjaimep]

I tried what @si4dev suggested and the warning did not go away, however, when using

const [ libraries ] = useState(['places']);

the warning goes away.

[ahmedyounes]

I tried what @si4dev suggested and the warning did not go away, however, when using

const [ libraries ] = useState(['places']);

the warning goes away.

indeed

[SachinMaharana]

Having the same issue. What if we use useRef?

const libraries = ['places']
..
..
const libraries = ['places']

const App = () => {
   let libRef = React.useRef(libraries)

  const {isLoaded, loadError} = useJsApiLoader({
    googleMapsApiKey: process.env.REACT_APP_MAP_API,
    libraries: libRef.current,
  })

 }

The warning went away, but i was wondering if there something wrong with this?

[JustFly1984]

@SachinMaharana Why so complicated? use just:

const libraries = ['places']

function App() {
  const {isLoaded, loadError} = useJsApiLoader({
    googleMapsApiKey: process.env.REACT_APP_MAP_API,
    libraries,
  })

  return isLoaded ? <GoogleMap /> : <></>
 }
 
 export default React.memo(App)

[Shmehade321]

I have tried all of this but none of them is working for me. Any thoughts?

[HYun66]

const libraries: Libraries = ['drawing']

const {isLoaded} = useJsApiLoader({
id: 'google-map-script',
googleMapsApiKey: 'Your API Key',
libraries: libraries,
});

[lucksp]

Libraries

when importing the Libraries typing, it results in an error:

Unable to resolve path to module '@react-google-maps/api/dist/utils/make-load-script-url'.

Is there a better way to define the TypeScript typing of Libraries?

[JustFly1984]

please provide minimal reproduction in codesandbox.io

[HYun66]

Libraries

when importing the Libraries typing, it results in an error:

Unable to resolve path to module '@react-google-maps/api/dist/utils/make-load-script-url'.

Is there a better way to define the TypeScript typing of Libraries?

I didn't meet this error, but you can also try: type Libraries = ("drawing | "geometry" | "localContext" | "places" | visualization)[];

[lucksp]

please provide minimal reproduction in codesandbox.io

I'll see what I can do...in the interim here's a screenshot:

[ericNodeone]

For TypeSctipt if you need!
outside component:
export const libraries = String(['places']);
And inside:
const { isLoaded, loadError } = useLoadScript({
googleMapsApiKey: GOOGLE_MAP_API,
[libraries]: libraries,
});

[rolandihms]

const [ libraries ] = useState(['places']);

After quite some headbanging and disregarding the useState hook as a vialble solution It has been solved by holding libraries array in state. Thanks @tonyjaimep

[ahmedibra28]

const [ libraries ] = useState(['places']);

This one has solved my issue