React freezing when running a development localhost server trying to render a Circle

[davejharmon]

Has anyone had problems like this? Been googling and reading all the docs, can't find anyone having this issue.

I've been building a react app with a google map that was mostly working in dev server - though oddly my five Markers were disappearing off the map after their first time rendering.

I added a Circle and now the map won't load and the entire page becomes unresponsive when I start up the dev server. The live build of the same code works fine, displaying the circle and markers correctly. Removing the Circle component lets the page load normally (the disappearing Marker issue remains). Again all of this works fine on live.

Any idea what could be causing this? Running React 18. Also this is my first time asking on github so if more info is needed let me know. Here's my package json, below:

Thanks for reading!

{
"name": "secwar",
"version": "0.1.0",
"private": true,
"dependencies": {
"@react-google-maps/api": "^2.10.1",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"fast-equals": "^3.0.1",
"firebase": "^9.6.11",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-firebase-hooks": "^5.0.3",
"react-icons": "^4.3.1",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"buildDeploy": "npm run build && firebase deploy --only hosting"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

[JustFly1984]

@davejharmon try to update react to 18.1

[davejharmon]

Thanks for the reply. Sadly same problem persists.

"dependencies": {
"@react-google-maps/api": "^2.10.1",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"fast-equals": "^3.0.1",
"firebase": "^9.6.11",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-firebase-hooks": "^5.0.3",
"react-icons": "^4.3.1",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},

[davejharmon]

I believe I've fixed this myself by moving from Marker and Circle to MarkerF and CircleF respectively.

An interesting knock on error: MarkerF isn't correctly updating marker icons when I remount them on a state change -but this is a much smaller problem for the dev server! I assume that's a bug that will get cleaned up in time.

[JustFly1984]

@davejharmon can you please make a minimal repro of MarkerF issue in codesandbox.io? All those F components are not tested - I just wrote it out of my head. This will help me to understand how to fix it.

[davejharmon]

It's just this fragment that isn't working - runners are pins on the map, selectedRunner is state modified by a keypress in the parent:

import { MarkerF } from '@react-google-maps/api';
import RunnerMarkerRed from '../../img/runner-marker-sm-red.png';
import RunnerMarkerPink from '../../img/runner-marker-sm-pink.png';

export const TeamMarkers = props => {
  const { runners, selectedRunner } = props;
  const runnerPins = runners.map(runner => (
    <MarkerF
      key={runner.id}
      icon={runner === selectedRunner ? RunnerMarkerPink : RunnerMarkerRed}
      position={runner.location}
      label={{ text: runner.no, color: 'white' }}
    />
  ));

  return runnerPins;
};

[JustFly1984]

@davejharmon Are you sure that inported runner variables are of correct type?
PS advise - useMemo on label prop.

If you make codesandbox.io demo - it will be more helpful, as I could debug it.

Please use typescript, and eslint with eslint-plugin-react-perf eslint-plugin-react-hooks eslint-plugin-react