⚛️ Dominando os React Hooks: useRef
No React, nem todo valor precisa participar da renderização da interface. É justamente nesse cenário que o useRef se destaca: ele permite manter uma informação entre renderizações sem provocar uma nova renderização quando seu valor é alterado. A documentação oficial define a ref como um objeto com a propriedade current, preservado entre as renderizações do componente.
🧠 useRef x useState
Embora ambos possam guardar valores, seus objetivos são diferentes. O useState deve ser usado quando a mudança do valor precisa atualizar a interface. Já o useRef é indicado para informações que não precisam aparecer na tela. Alterar ref.current não faz o React renderizar novamente o componente.
Esse comportamento torna o hook especialmente útil para armazenar referências, identificadores, valores temporários e informações que precisam sobreviver entre renderizações.
🎯 3 usos essenciais do useRef
1️⃣ Contar renderizações
Uma ref pode armazenar uma contagem de renderizações sem criar um novo ciclo de renderização. Esse é um exemplo importante para compreender a diferença entre uma informação persistente e um estado visual.
2️⃣ Acessar elementos do DOM
Um dos usos mais comuns é criar uma referência para um elemento HTML. Assim, é possível acessar diretamente o elemento e realizar ações como colocar o foco em um campo de entrada. A documentação oficial também apresenta o foco de um input como exemplo clássico de manipulação do DOM com refs.
3️⃣ Guardar valores anteriores
O useRef também pode preservar o valor anterior de um estado. Combinado com useEffect, ele permite armazenar a informação anterior sem provocar uma nova renderização.
⚠️ Um cuidado importante
Refs não devem ser usadas como substitutas do estado quando o valor precisa atualizar a interface. Além disso, a documentação atual recomenda não ler ou escrever ref.current durante a renderização, exceto em situações específicas de inicialização. Eventos e efeitos são os locais apropriados para essas operações.
🚀 Conclusão
Dominar o useRef é entender que o React oferece diferentes ferramentas para diferentes necessidades. Quando um valor precisa persistir entre renderizações, mas sua alteração não deve disparar uma nova renderização, uma ref pode ser a escolha certa.
Use useState para dados que afetam a interface e useRef para informações que precisam permanecer disponíveis sem participar diretamente da renderização. Essa distinção ajuda a criar componentes mais previsíveis e simples.