Nothing Special   »   [go: up one dir, main page]

Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: React 18 markers #1224

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

BenHodgsonR2R
Copy link
@BenHodgsonR2R BenHodgsonR2R commented May 3, 2024

Issue: (#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
Copy link

+1 👍 for this

@managervcf
Copy link

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

@rubberbandage
Copy link

+1 for this to be merged

@Mbes9
Copy link
Mbes9 commented May 15, 2024

+1 to merge this...

@RobotScribe
Copy link

+1

1 similar comment
@maanenh
Copy link
maanenh commented May 20, 2024

+1

@BenHodgsonR2R
Copy link
Author

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
Copy link
icaaq commented May 27, 2024

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

@wescopeland
Copy link

It won't be. The library is abandoned.

Is this PR available in a fork anywhere?

@MicheleFatticcioni
Copy link

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

@wescopeland
Copy link

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

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

@ciruz
Copy link
ciruz commented Jul 10, 2024

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
Copy link
camro commented Dec 10, 2024

Any updates on merging this?

@BenHodgsonR2R
Copy link
Author

My recommendation is to either:

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.