Como Usar useRef
O que é useRef
Agora imagine que você é um fiscal de obra e deve anotar com um giz em uma parede tudo que for feito na obra. Mas anotar na parede também é um ato em si. Você é uma pessoa muito lógica e conclui que também deve anotar que anotou isso na parede, e anota novamente que fez a anotação e isso gera um loop no estado.
Como evitar que uma atualização de valor cause nova renderização no componente?
O useRef resolve esse problema!
Referência
A referência é um objeto do useRef que mantém uma propriedade chamada current, onde você pode armazenar um valor.
A referência também pode apontar para um elemento do DOM, permitindo chamar métodos específicos e acessar e manipular propriedades dos elementos no HTML, sendo provavelmente o maior uso para esse hook.
A atualização dessa referência não causa reatividade e não renderiza o componente novamente. Dado que ele não causa nova renderização no componente, não devemos utilizar useRef para reatividade visual. Para isso existe o useState.
Parâmetros
O useRef recebe um único parâmetro, o valor inicial da referência.
const minhaRef = useRef(valorInicial);
Retorno
Retorna um objeto com a propriedade current, onde podemos acessar e modificar esse valor.