Código de introducción

Intenté escribir un código de ejercicio por React que ilustra un autobús y sus asientos. Los asientos que están reservados, son inseleccionables y de color rojo. El resto de los asientos se pueden seleccionar haciendo clic en ellos y eligiendo un género en una ventana emergente abierta. Puedes verlo y probarlo aquí .

El problema

Todo funciona bien. Pero mi problema es sobre el rendimiento. Sé que cuando cambia un estado, ese componente se representará nuevamente. Por supuesto, solo los cambios se pasarán a DOM. Está bien.

El problema comienza aquí que en segundo plano, los códigos de los componentes y los códigos de sus hijos se ejecutan por completo. Considere que mi autobús tiene 24 asientos y un asiento es un componente. Cada vez que haga clic en los asientos, ya sea que elija un género o no, verá muchos registros en la consola, lo que significa (al menos eso creo) que todo se ejecuta nuevamente.

Mi petición

¿Cómo puedo evitar operaciones adicionales en segundo plano y mejorar la estructura para evitarlas?

No tengo una insistencia particular en usar usestate si puedo resolverlo de alguna manera.