title: how can I prevent extra background operations when I change an state in react?
body: <p><strong>Introducing Code</strong></p>
  <p>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. <strong>You can see and try it <a href="https://codesandbox.io/s/quirky-chaum-lcr5iu" rel="nofollow noreferrer">here</a>.</strong></p>
  <p><a href="https://i.stack.imgur.com/gKWbp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gKWbp.png" alt="enter image description here" /></a></p>
  <p><strong>The Problem</strong></p>
  <p>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.</p>
  <p>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.</p>
  <p><strong>My Request</strong></p>
  <p>how can I prevent extra background operations And improve the structure to avoid them?</p>
  <p>I have no particular insistence to use <code>usestate</code> if I can solve it in some way.</p>