Is there any way to detect individual elements rendering in React Component properly? (Not Components rendering)

I know that we can detect Components rendering through React’s Developer Tool, I have also read other ways in this question. but this is not what I need.

I’m looking for way to detect individual elements rendering in Component, for example when we have mapped list and we will add one item:

before:

<ul>
  <li key="1">Banana</li>
  <li key="2">Watermelon</li>
  <li key="3">Pear</li>
</ul>

after:

<ul>
  <li key="0">Apple</li>
  <li key="1">Banana</li>
  <li key="2">Watermelon</li>
  <li key="3">Pear</li>
</ul>

I know that here React creates a new Virtual DOM and compares it with previous one, then it updates Browser DOM with least number of changes possible without rendering the entire DOM again. in this case by using key React will not mutate every child and realizing it can keep the <li>Banana</li>, <li>Watermelon</li> and <li>Pear</li> subtrees intact.

I need to see this rendering/inserting process properly, As I observe Chromes developer tool (Shift+Ctrl+i => Elements) does not work correctly, because it works same way with Vanilla JavaScript when Vanilla JavaScript would mutate every child instead of realizing it can keep the <li>Banana</li>, <li>Watermelon</li> and <li>Pear</li> subtrees intact, but in Chromes developer tool this is not detected.

Is there any way to detect elements rendering properly? (even by Browser if there is not any React tool)

P.S

I don’t mean Components rendering

Answer

One of the handiest solutions is to use event DOMSubtreeModified

Something like this:

document
  .querySelector("#value")
  .addEventListener("DOMSubtreeModified", function () {
    alert("value changed");
  });

Working code snippet:

function App() {
  const [state, setState] = React.useState(["Banana", "Watermelon", "Pear"]);

  React.useEffect(() => {
document
  .querySelector("#list")
  .addEventListener("DOMSubtreeModified", function () {
    alert("element changed");
  });
  }, []);

  const handleAddState = () => {
setState([...state, "Pear"]);
  };

  return (
<div className="App">
  <button type="button" onClick={handleAddState}>
    Increase
  </button>
  <ul id="list">
    {state.map((item) => (
      <li>{item}</li>
    ))}
  </ul>
</div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>