Count of duplicate console.log() resets when called from a different element

Question

I have the following code:

import ReactDOM from 'react-dom/client';
import { useState, useEffect } from 'react';

const App = () => {
  
  useEffect(() => { console.log('Render'); });

  const [item, setItem] = useState([]);
  const [word, setWord] = useState([]);

  return (
    <div>
      <input value={item} onChange={(e) => {setItem(e.target.value)}}></input>
      <label>{word}</label>
      <button onClick={() => setWord(new Date().toString())}>Submit</button>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

Why is it that console.log('Render') will show the number of times it was printed by typing in the <input>, and the number of times it was printed from clicking the <button>?

Here you can see it printed 'Render' three times when I typed 'abc', and then it started a new count of 'Render' when I clicked the button twice:

Why doesn't it just say 5 Render?

Answer 1

The console automatically separates logs that originate from different user actions, maintaining separate counters for each interaction type.

This distinction is helpful in debugging because it allows you to see how different interactions impact the component lifecycle independently.