0

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:

  1. Como saber quando acontece a atualização do DOM virtual? Imagino que seja a cada retorno do componente, mas não tenho certeza.
  2. Como saber quando acontece a atualização do DOM real?
2
  • A tua pergunta é no sentido de aprendizagem e compreensão dos mecanismos do DOM virtual ou tens código que queres correr quando o DOM for alterado?
    – Sergio
    Commented 25/04/2020 às 5:42
  • Aprendizagem. O máximo que farei é usar isso para detectar componentes que estão sendo atualizados excessivamente no DOM. Por exemplo, colocando um 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 Commented 25/04/2020 às 9:12

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .