Estou desenvolvendo um projeto em React e reparei que usar múltiplos setState()
seguidos causava o render do meu componente novamente, por exemplo:
function MeuComponente() {
console.log("Componente renderizado ");
const [stateA, setStateA] = React.useState(false);
const [stateB, setStateB] = React.useState(false);
// useEffect apenas para atualizar o state uma única vez, não em todo render
React.useEffect(() => {
setTimeout(() => {
console.log("Atualizando state");
setStateA(true);
setStateB(true);
}, 1000);
}, []);
return <div ></div>
}
ReactDOM.render(<MeuComponente />, document.querySelector('#app'));
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
Isso me preocupou um pouco porque eu achava que o React fazia um batch ("lote") dos setState
para renderizar uma única vez. Fui pesquisar e encontrei no SOen uma resposta para isso. Destacando o principal ponto:
Renderizar (no contexto React) e confirmar as atualizações virtuais do DOM no DOM real são questões diferentes. (...) O React pode fazer um batch das chamadas
setState
e atualizar o DOM do navegador com o novo estado final.
Partindo do ponto que isso realmente está certo, fiquei com essas dúvidas:
- Como saber quando acontece a atualização do DOM virtual? Imagino que seja a cada retorno do componente, mas não tenho certeza.
- Como saber quando acontece a atualização do DOM real?
console.log
na atualização, mas não precisa ser uma solução via código, pode ser através de uma extensão também tipo React Developer Tools