Nesse caso de um formulário tão simples, o custo do useRef não acaba sendo maior do que um rerender causado pelo useState?
Essa é uma dúvida recorrente que tenho, o que é menos custoso em termos de processamento?
O custo do useState
na verdade depende do tanto de coisa que está sendo rerenderizado. Na maior parte das vezes, você nem vai perceber diferença, é só um detalhe de otimização e o desenvolvedor acaba optando o caminho que está acostumado. Se estiver com o desempenho ruim, então você acaba procurando alternativas, usar menos estado, ou componentes menores, vendo o que é possível melhorar.
O useRef
na verdade não me parece ter um custo envolvido que possamos usar para comparação com o useState
. Lendo a documentação, a parte mais relevante que encontrei foi:
When you change the
ref.current
property, React does not re-render your component. React is not aware of when you change it because a ref is a plain JavaScript object.
Ou seja, é só um objeto JavaScript onde você muda o valor do atributo current
.