Don't enter your Google Maps API Key on this site https://react-google-maps-api-docs.netlify.app

[theer1k]

I've entered my Google Maps API key on the https://react-google-maps-api-docs.netlify.app to test the Directions Service (specifically) and it started re-render infinitely for all the components in there for testing the library. Checking Google Cloud, more than 61k of requests were made only from this website with great billing to pay.

[JustFly1984]

sorry, possible some issues with useEffect. it is not maintained. If somebody want's to fix it, your PR is welcome. I will shut it down meanwhile to reduse damage in future

[JustFly1984]

I've removed the website from hosting. The source code is in packages/react-google-maps-api-gatsby-example

[amjad-awan]

i am unable to use this package without official docs. so kindly add office docs link

[theer1k]

@JustFly1984 didn't find any useEffect on the packages/react-google-maps-api-gatsby-example, did you mean in the packages/react-google-maps-api ?

[covik]

Can setting quota limits help with the large bill https://cloud.google.com/apis/docs/capping-api-usage in the future ? Create new project, new api key and set low number for requests per minute (or per user)?

[theer1k]

@Covik I did that but only after 61k of requests. I was just trying, learning how this hole thing works.

[clelantoson]

@JustFly1984 didn't find any useEffect on the packages/react-google-maps-api-gatsby-example, did you mean in the packages/react-google-maps-api ?

I was trying to make this work all was ok until I used DirectionsService.

I didn't find a useEffect either but there were some maybe "breaking" changes in this file 1 week ago, I can't see how this infinite call is done https://github.com/JustFly1984/react-google-maps-api/blame/1ce0760179c0e61bc68026ebcd9134de7a92d9b7/packages/react-google-maps-api/src/components/directions/DirectionsService.tsx#L35

If someone has any idea...

[theer1k]

@clelantoson if you follow this example, you will see the problem. I think someone was trying to fix on the examples website at https://react-google-maps-api-docs.netlify.app referred by this exact file, but it was not working when I downloaded myself and tested. This Pull Request was created aiming to fix it which the infinite re-rendering issue seems to be gone here.

[ezerssss]

@JustFly1984 didn't find any useEffect on the packages/react-google-maps-api-gatsby-example, did you mean in the packages/react-google-maps-api ?

I was trying to make this work all was ok until I used DirectionsService.

I didn't find a useEffect either but there were some maybe "breaking" changes in this file 1 week ago, I can't see how this infinite call is done https://github.com/JustFly1984/react-google-maps-api/blame/1ce0760179c0e61bc68026ebcd9134de7a92d9b7/packages/react-google-maps-api/src/components/directions/DirectionsService.tsx#L35

If someone has any idea...

@clelantoson DirectionsService callback seems to return result and status

but the docs only has a parameter of response

I just changed the function to receive the proper parameters in this PR

I also referenced @IndianBoyBR PR in creating the change

[theer1k]

@ezerssss, I saw your PR, and it seems to be not working as expected. To clarify the problem, I've recorded a small video from this StackBlitz project simulating the issue I went through already with the code from your PR.

Note: Add your Google API Key on index.tsx file from this StackBlitz

Live Directions API infinite re-render loop from DirectionsRenderer.md 👇🏾

https://github.com/JustFly1984/react-google-maps-api/assets/27955793/dee8a98c-8fbf-4002-ac54-5efdc586e005

[ezerssss]

@IndianBoyBR hmmm yeah seems to be that state is always being changed? since the clip below shows that the component always rerenders and calls the callback function

we can maybe memorize the options for both the DirectionsService and DirectionsRenderer to prevent this from happening?

https://github.com/JustFly1984/react-google-maps-api/assets/72904036/0c627311-860d-4959-9b31-cd055e5bbc14

I think what's happening is:

• the directionsCallback is called which then changes a state
• change of state then rerenders the component which then calls the directionsCallback function
• loop

[ezerssss]

Can we maybe transform this to a functional component?

[ezerssss]

Check this out @IndianBoyBR https://github.com/JustFly1984/react-google-maps-api/pull/3269#issuecomment-1657048870