Map not showing elements anymore with React 18

[marduzca]

Please provide an explanation

React 18 was just released and after upgrading I noticed that my map wasn't showing the markers and polygons I rendered anymore. I tried debugging in several ways, but didn't manage to make it work. So I assume that something has to be adjusted in the library to be compatible with React 18.

Your Environment

os: mac

node --version: 14

react version: 18

webpack version: 4

@react-google-maps/api version: 2.8.0

How does it behave?

Markers and Polygons are not shown in the map

How should it behave correctly?

All elements in the map should be visible

[JustFly1984]

@marduzca It is not yet tested with react@18 That will be breaking changes, and we need to release @3.0.0 version We have gatsby example, and storybook, which first should be updated to support react@18 I'm not talking about docs, which are broken since long time ago...

I will not have time to invest in near future, so if you want, you can make a PR and I will merge it and release new major version.

PS: possibly we need to enable lerna and move eslint config and packages to top level

[marduzca]

@JustFly1984 I just created a PR. I just updated all the React versions to 18 and fixed compilation errors that came with it. In some cases that I had no idea how to solve properly I just ts-ignored it (I know it's not the best, but I don't have enough context to actually do it properly). I tested it by running prestart:gatsby, start:gatsby (worked until I was asked for a password) and storybook. They all seem to be working.

Let me know if that's enough. Thank you!

[marduzca]

I had an issue where markers didn't show on initial render.

Showing the markers conditionally, after the component is rendered, worked:

const [isMounted, setIsMounted] = useState(false);

useEffect(() => setIsMounted(true), []);

<GoogleMap>
    {isMounted && <Marker position={{ lat: -34.0691357, lng: 18.3802664 }} />}
</GoogleMap>

(example is minimal, <GoogleMap /> is missing loads of props)

Thanks for the idea! I tried it out, but it didn't help, I think the problem really is related to the React version

[marduzca]

@JustFly1984 Sadly the Upgrade React 18 didn't solve the problem yet :/ Not sure what is happening

[JustFly1984]

@marduzca can you make minimal reproduction in codesandbox.io ?

[brandoniffert]

@JustFly1984 I'm seeing the same thing too when using React 18, but only when using Strict Mode.

@marduzca Are you using strict mode? Don't know if it's useful but here's a codesandbox of it with and without strict mode

https://codesandbox.io/s/react-google-maps-api-forked-8uvb39?file=/src/index.js

[JustFly1984]

@brandoniffert There is several things bad in your code:

• renderMap - extract to separate component file and wrap export default memo(MapComponent).

• object or array props - you should make it as const or state.

  • you are not using eslint with eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-perf

  please read more about object reference consistency

[marduzca]

@JustFly1984 Independently of what could or could not be done better, that doesn't explain why it doesn't work in StrictMode, but works without it. I think it is a good minimal example of what is not working, so let's focus on that topic.

When searching about changes regarding StrictMode in React 18 I only found this:

With Strict Mode starting in React 18, whenever a component mounts in development, React will simulate immediately unmounting and remounting the component.

On the second mount, React will restore the state from the first mount. This feature simulates user behavior such as a user tabbing away from a screen and back, ensuring that code will properly handle state restoration.

When the component unmounts, effects are destroyed as normal.

Source: https://reactjs.org/docs/strict-mode.html

Could this be causing the trouble?

[JustFly1984]

@marduzca @brandoniffert I can't debug myself and have no time to make a reproduction. I guess this is something related to class based component. Please try new InfoWindowF component and see if it has same issues.

[marduzca]

@JustFly1984 You don't actually need an API key to debug it. The code sandbox from @brandoniffert already allows to debug perfectly.

I think you might be right regarding class vs functional components, because there is no problem rendering the InfoWindowF component and also replacing Marker with MarkerF makes it work in both cases. See screenshot:

[JustFly1984]

@marduzca I'm currently have difficulty to find time to debug the project. I've made multiple F components based on hooks, and looks like majority is working.

To release 3.x we need to male all components as hook based and get rid of class based, and all of it should support react 18 at this point. I need champions, who are ready to take one or more components left to transform, create the jest test, example in gatsby, and story for storybook.

This library already used by thousands of projects, and I feel like community should step in and provide the support.

I also do not get any income from this open source project.

Google hasn't approached me yet, and did not answered to my issues.

[Santheepkumar]

@JustFly1984 You don't actually need an API key to debug it. The code sandbox from @brandoniffert already allows to debug perfectly.

I think you might be right regarding class vs functional components, because there is no problem rendering the InfoWindowF component and also replacing Marker with MarkerF makes it work in both cases. See screenshot:

Thanks buddy. It;s worked

[hilts-vaughan]

Could it be related to https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-strict-mode? Specifically, the component being unmounted and re-mounted with the same state?

[JustFly1984]

@hilts-vaughan looks like it does. closing an issue, please use hook based components with react@18+

[Saeid-Barzegar]

@JustFly1984 I'm seeing the same thing too when using React 18, but only when using Strict Mode.

@marduzca Are you using strict mode? Don't know if it's useful but here's a codesandbox of it with and without strict mode

https://codesandbox.io/s/react-google-maps-api-forked-8uvb39?file=/src/index.js

Yes, correct!!!! it resolved my case thanks man

[abhijayrana]

@marduzca this worked, but im curious about what the difference between marker and markerf is.

[thalaz]

@marduzca this worked, but im curious about what the difference between marker and markerf is.

The difference is that Marker is a class component while MarkerF is a functional component.

[Fabioni]

so the answer to that problem is just always using MarkerF, PolylineF etc.? Feels a bit sketchy. Are there any disadvantages like performance?

[JustFly1984]

@Fabioni yes use F components for react@17+, there is no performance issues.

[JustFly1984]

Old components are for backward compatibility.