Anzahl der doppelten console.log()-Zurücksetzungen, wenn sie von einem anderen Element aufgerufen werden ⇐ JavaScript

[Guest]

Ich habe den folgenden Code:

Code: Select all

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 (

 {setItem(e.target.value)}}>
{word}
 setWord(new Date().toString())}>Submit

);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

);

Warum zeigt console.log('Render') an, wie oft es gedruckt wurde, indem eingegeben wird, und die Wie oft wurde es nach dem Klicken auf den gedruckt?
Hier können Sie sehen, dass es dreimal „Render“ gedruckt hat, als ich „abc“ eingegeben habe, und dann gestartet wurde eine neue Zählung von „Rendern“, als ich auf die Schaltfläche geklickt habe zweimal:


Warum steht da nicht einfach 5 Render?