Investigated unnecessary component re-renders using React Dev Tools Profiler

On the initial render,all components are rendered as expected.

Now when we click the galaxy button we can see what is rendered and how to optimize it. We get two Concept tag which are images and two buttons that get rendered. The Concept tag with Images are stable so we need not render every time .So we can use React.memo to prevent it from rendering.

Before applying React.memo

After applying React.memo

But now we see concept tag is resolved but button tag is rendered twice.We can use useCallback to maintain a stable callback reference passed through onSelect prop.

A quick idea. We can also see why a component is rendered.