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.
