Quando não utilizar estados no React

Em determinados contextos, é importante evitar a renderização desnecessária de componentes, e um exemplo disso é uma tela de login.

Para evitar essas renderizações desnecessárias, podemos utilizar a referência (ref) em React.

Antes

Sempre que os estados do componente são atualizados, a função de renderização é executada novamente, o que faz com que a interface do usuário seja atualizada.

Quando não utilizar estados no React - antes (codepen.io)

Nesse caso, os valores dos campos são capturados utilizando a funcionalidade "ref", mas somente quando o formulário é submetido.

Como nenhuma atualização de estado é realizada durante esse processo, o componente é renderizado somente uma vez.

Quando não utilizar estados no React - antes (codepen.io)