reactjs - why react dev tools paint highlights to components in this example - Stack Overflow

//App.tsx
import { A } from "./A";
import { B } from "./B";

function App() {
  return (
    <>
      <div>
        <B />
      </div>
      <A />
    </>
  );
}

export default App;

//A.tsx
import { useState } from "react";

export const A = () => {
  const [count, setCount] = useState(0);

  return (
    <div onClick={() => setCount((prevCount) => prevCount + 1)}>{count}</div>
  );
};

//B.tsx
export const B = () => {
  return <div>123</div>
}

In the App.tsx code above, when you click on component A, component B is also highlighted. However, after removing the div that wraps component B, clicking on component A no longer highlights component B. Why does this happen?

I'm studying React's reconciliation and virtual DOM, but I'm having a hard time understanding it.

---

another...

import { A } from "./A";

function App() {
  return (
    <>
      <div>
        <A />
        <A />
      </div>
      <div>
        <A />
      </div>
    </>
  );
}

export default App;

The above code also shows the highlight in an unusual way.