Making React component only rerendering conditionally

Question

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.

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
– Bence Hargitai, Commented Jul 10, 2023 at 8:03

Bence Hargitai · Accepted Answer · 2023-07-11 08:50:57Z

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

answered Jul 11, 2023 at 8:50

Bence Hargitai

154 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Making React component only rerendering conditionally

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related