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.
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);