Resetting state of a component in ReactJs by changing its position in the UI tree

React will keep the state around for as long as you render the same component at the same position

in this example, I render 2 Counter components, by checking the checkbox, I control showing/hiding the first Counter component.

export default function App() {
  const [showA, setShowA] = useState(true);
  return (
    <div>
       {showA && <Counter />} 
      <Counter />
      <label>
        <input
          type="checkbox"
          checked={showA}
          onChange={e => {
            setShowA(e.target.checked)
          }}
        />
        Render the first counter
      </label>
    </div>
  );
}

based on the docs, ** React keeps track of which state belongs to which component based on their place in the UI tree. You can control when to preserve state and when to reset it between re-renders.**

so when I hide/then show the first Counter, its state gets reset, the question is, by hiding and showing the first counter, we are changing the position of the second counter, yet its state doesn’t get reset, any help why?

I expected that since the position of the 2nd component changes, then its state will reset as well, yet that did not happen