Introducing Code

I attempted to write an Exercising code by React which illustrates a bus and its seats. The seats that are reserved, are unselectable and red. The rest of the seats are selectable by clicking on them and choosing a gender at an opened popup. You can see and try it here.

The Problem

Everything works well. But my problem is about performance. I know that when a State changes, that component will be rendered again. Of course, only changes will be passed to DOM. It's OK.

The problem starts here that in the background, the component codes and its children's codes are executed completely. Consider my bus has 24 seats and a seat is a component. Every time you click on seats, whether you choose a gender or not, you will see many logs in the console which means (at least I think it means) everything is executed again.

My Request

how can I prevent extra background operations And improve the structure to avoid them?

I have no particular insistence to use usestate if I can solve it in some way.