Quando você usa useRef em vez de useState?

Use useRef quando você precisa de um valor mutável que sobrevive aos renders mas não pode causar um: um nó do DOM, o id de um timer, o valor anterior de uma prop, uma flag rastreando se algo já rodou. Use useState quando o valor deve aparecer na UI, porque escrever numa ref não agenda um render. A regra prática é simples: se a tela deve mudar, é estado.

A linha divisória é se mudar o valor deve repintar a tela. Estado repinta, ref não. Então a ref é onde eu coloco qualquer coisa que é contabilidade em vez de UI: o nó do DOM que eu preciso focar ou medir, um id de intervalo que eu tenho que limpar na desmontagem, o último valor de uma prop para eu comparar, uma flag de já fiz isso. O erro clássico é guardar algo numa ref e ficar se perguntando por que a UI nunca atualiza, e o espelho disso é colocar a posição de scroll no estado e re-renderizar a cada evento de scroll. Eu também mantenho a regra de não ler nem escrever refs durante o render, só em efeitos e event handlers, porque durante o render o React espera que a função seja pura e uma leitura de ref pode te dar valores diferentes entre passadas. Uma mudança boa no React 19 é que ref virou uma prop normal para componentes de função, então eu parei de embrulhar coisas em forwardRef.