0

I have a website which tracks devices on a map. For that I use Google Map react api. My problem is that the Map component gets rerendered too many times for no reason, even when its props don't change. I read this is why people use React Memo and I tried it, however it still gets rendered as many times as before. The page rendering happens when I click a button and two components get changed to another two components and then back if you press it again.

So my question: Is there a way to only make the Map component rerender when I tell it to do? Otherwise stay the same as it was before and don't make api calls.

Bence Hargitai
  • 15
  • 4
  • Check out [this Github issue](https://github.com/tomchentw/react-google-maps/issues/220) , it may be helpful – RadioZahra Jul 09 '23 at 21:03
  • Thank you, it was indeed helpful. However my problem is that I'm currently not using classes because of useJsApiLoader() which can't be called in a class component. Do you know any workaround for this? I've been trying to find a solution but no luck yet! – Bence Hargitai Jul 10 '23 at 08:03

1 Answers1

0

I solved the issue with React.memo. Here is the simple code:

const Map = (props) => { ...}

function areEqual(prevProps, nextProps) { ...}

export default React.memo(Map, areEqual);
Bence Hargitai
  • 15
  • 4