XP 0

Por que a tela atualiza sozinha

O conceito nº 1 do React: o re-render

No JS puro você mandava a tela mudar na mão (textContent = ...). No React é diferente e melhor:

Quando você chama setQtd, o React roda a função do componente DE NOVO — com o novo valor do estado — e atualiza na tela só o que mudou. Isso é o re-render.

function Carrinho() {
  const [qtd, setQtd] = useState(0);
  // a cada clique, esta função roda de novo com o qtd novo
  return <p>Itens: {qtd}</p>;
}

🧠 A virada de chave (declarativo x imperativo):

  • JS puro (imperativo): "quando clicar, PEGUE o parágrafo e MUDE o texto para X" — você dá as ordens.
  • React (declarativo): "a tela É Itens: {qtd}". Você descreve como a tela deve ser para cada valor; o React se vira para deixar o HTML assim.

Você para de mexer no DOM na mão. Descreve o resultado; o React executa. É por isso que apps grandes ficam gerenciáveis.

Pontos-chave

  • set → re-render
    mudar o estado faz o React rodar o componente de novo e atualizar a tela.