Error (Uncaught exception) when unmounting Map about react-google-maps-api HOT 11 CLOSED

Also experiencing this, with a solid reproduction path, it happens predictably when NextJS 8.1.0 hot reloads.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in LoadScript (at Map.tsx:87)
    in Map (at TripDetailsMap.tsx:94)
    in section (created by Context.Consumer)
    in StyledComponent (created by TripDetailsMap__InnerWrapper)

Update: I switched from <LoadScript /> to <LoadScriptNext /> and switched to the React Hooks API and I no longer experience this problem. I'll update further if it resurfaces.

from react-google-maps-api.

Hi @MiguelGPereira. Thanks a lot for the super detailed bug report.
I'll look into it in the next couple of days

from react-google-maps-api.

@MiguelGPereira please check new @react-google-maps/[email protected] version. It should resolve your error.

from react-google-maps-api.

@nojaf unfortunately not, we ended up migrating to mapbox and react-map-gl

from react-google-maps-api.

UPDATE: I managed to reproduce this problem without lazy loading, so it might not be solely related to that. However, lazy loading makes this problem easier to reproduce, without lazy loading is considerably harder. I'll update the title and the description accordingly.

from react-google-maps-api.

@MiguelGPereira I've tested your codesandbox example with @1.0.10, and it seems there is no issue

from react-google-maps-api.

@JustFly1984 I updated to the new version but the problem still occurs, although it looks harder to reproduce. But even in the codesandbox w/@1.0.10 it still happens, try a few times clicking fast between Refresh and Map OFF, and you'll see the Warning: Can't perform a React state update on an unmounted component in LoadScript in the console. You might want to add an API_KEY to the const in "map.js" so the error You have exceeded your request quota for this API doesn't appear first.

from react-google-maps-api.

Hi @mpgon I'm having the same error react-dom.development.js?7f13:546 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. in LoadScript

Were you ever able to solve this?

from react-google-maps-api.

@uriklar mention

from react-google-maps-api.

considering issue closed

from react-google-maps-api.

@ostenning i am still experiencing the same issue even when switching to LoadScriptNext. Could you expand on what you "switched" to the react hooks API? Im not really sure what I should switch to it?

from react-google-maps-api.