Tenho o seguinte código:
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 />
);
Por que ele console.log('Render')
mostrará o número de vezes que foi impresso ao digitar <input>
e o número de vezes que foi impresso ao clicar <button>
?
Aqui você pode ver que ele imprimiu 'Render' três vezes quando digitei 'abc' e então iniciou uma nova contagem de 'Render' quando cliquei no botão duas vezes:
Por que não diz simplesmente 5 Render
?