Fix: React 18 markers

[BenHodgsonR2R]

Issue: (https://github.com/google-map-react/google-map-react/issues/1223)

This pull request addresses an issue with the markers rendering incorrectly using React ^18.

The issues were:

1. StrictMode behaves differently, which exposes an issue with the dimensionsCache property in componentWillUnmount. https://react.dev/blog/2022/03/29/react-v18#new-strict-mode-behaviors
2. Batched updates, causing flickering with the markers when the map is repositioned or zoomed. Resolved by opting out of automatic batching for the marker state updates (via flushSync). https://react.dev/blog/2022/03/29/react-v18#new-feature-automatic-batching

[AaronLayton]

+1 👍 for this

[managervcf]

@itsmichaeldiego This really needs to be merged. Otherwise, this library will naturally die.

[rubberbandage]

+1 for this to be merged

[Mbes9]

+1 to merge this...

[RobotScribe]

+1

[maanenh]

+1

[BenHodgsonR2R]

To avoid this warning: Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.

I've moved flushSync out of the lifecycle method, the fix has the same effect, but without the warning in console now.

Relevant commit

[icaaq]

Any update on when this is going to get merged? @karldanninger @itsmichaeldiego

[wescopeland]

It won't be. The library is abandoned.

Is this PR available in a fork anywhere?

[MicheleFatticcioni]

Is this project still alive? This pull request will fix a very bad bug, please marge it

[wescopeland]

I've created a fork that contains this branch's changes:

npm install --save google-map-react-concurrent2

[ciruz]

If you need this now and can't wait for the merge, you can create a patch and apply it to your local project.

1. Clone the repository

git clone https://github.com/google-map-react/google-map-react.git
cd google-map-react

2. Download the PR as a Patch File

Open the pull request URL and add .patch to the end of it, to download it as a patch file:

Original PR URL: https://github.com/google-map-react/google-map-react/pull/1224 Patch URL: https://github.com/google-map-react/google-map-react/pull/1224.patch

Save the patch file (1224.patch) to the directory of your local copy of google-map-react.

3. Apply the Patch

Inside your local copy of google-map-react, apply the patch using the git apply command:

git apply 1224.patch

4. Commit Your Changes

Add and commit your changes:

git add .
git commit -m "Apply fixes from pull request #1224"

5. Create a Tarball from Your Package

Create a tarball of your patched package:

pnmp pack

This will generate a file like google-map-react-2.2.1.tgz.

6. Use the Tarball in Your Project

Copy the tarball file (google-map-react-2.2.1.tgz) to your project directory and update your package.json to use it:

"dependencies": {
  "google-map-react": "file:./google-map-react-2.2.1.tgz",
  // your other dependencies...
}

7. Install the Package

pnpm i

After applying this, everything works again, I see all markers and the markers don't flicker or jump around when I move the map. Thank you @BenHodgsonR2R and maybe @karldanninger or @itsmichaeldiego can look into this too. Thanks

[camro]

Any updates on merging this?

[BenHodgsonR2R]

My recommendation is to either:

• Patch, as guided here: https://github.com/google-map-react/google-map-react/pull/1224#issuecomment-2219951120
• Or migrate to https://github.com/visgl/react-google-maps which is actively maintained.

I don't think it's worth relying on contributions here.

The project I've been working on that previously used this library has been migrated to https://github.com/visgl/react-google-maps and we haven't faced any issues with React 18.

[3imed-jaberi]

Hello @karldanninger @itsmichaeldiego, could you please ship this piece at least as beta or alpha release!

[JJSLIoT]

Any updates on this?

[itsmichaeldiego]

Deployed in v2.2.5, let me know if it works, thanks