useRef Hook de Ref

Última atualização: 2026-11-03

useRef Hook de Ref

useRef retorna um contêiner com uma propriedade current: ele mantém qualquer valor vivo entre renderizações, e escrever nele nunca dispara uma re-renderização. O uso mais comum é obter um nó do DOM para focar, medir ou rolar; o segundo é armazenar dados mutáveis como um id de temporizador que não participa da saída da renderização. Como o contêiner nunca causa uma renderização, é o lugar certo para valores que importam ao processo, mas não à tela.

Grupo	Efeitos e Desempenho
Tipo	Hook
Desde	React 16.8

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

const ref = useRef(initialValue)
ref.current          // read
ref.current = ...    // write: legal, but it does not trigger a render

<input ref={ref} />  // after it is mounted, ref.current is the node itself

⚙️ Parâmetros

initialValue	O valor inicial de current; só faz efeito na primeira renderização, e mudar o argumento depois não o reatribui.

Retorna：Retorna um objeto estável { current: initialValue }: é exatamente a mesma referência por todo o ciclo de vida do componente.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Clicar em "Focus" joga o cursor para a entrada; clicar em "Clear and focus" esvazia o campo e devolve o cursor — trabalho de DOM que state simplesmente não consegue fazer.

▶ Experimente

💡 Pontos-chave

💡 Dica Use state para o que o estilo declarativo consegue fazer (renderizar conteúdo) e um ref apenas para o que precisa ser imperativo (focar, rolar, medir).

ℹ️ Informação Mudar ref.current não renderiza de novo — um ref é uma escotilha de escape, então nunca guarde lá dados dos quais a UI depende.

⚠️ Aviso Ler ou escrever um ref durante a renderização quebra o contrato de função pura (exceto inicialização preguiçosa); faça o trabalho com ref em manipuladores de eventos ou efeitos.

Mais casos em breve.

📚 Tutoriais Relacionados

useRef e o DOM

Lição 10: os cenários típicos para manipular o DOM com um ref e seus limites.

❓ Perguntas Frequentes

P Qual é a diferença entre um ref e state?

R Uma mudança em state dispara uma re-renderização, uma mudança em um ref não; state é dado para renderização, um ref é dado para o processo.

P Quando o valor inicial de ref.current entra em vigor?

R Quando o ref é criado na primeira renderização; re-renderizações posteriores nunca redefinem current porque o argumento mudou.

P Consigo alcançar o DOM dentro de um componente filho?

R Não por padrão (um ref não é uma prop comum). Encaminhe-o com forwardRef, ou deixe o filho expor uma interface com useImperativeHandle.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós

useRef Hook de Ref

useRef Hook de Ref

📝 Sintaxe

⚙️ Parâmetros

▶ Exemplo

💡 Pontos-chave

🏷️ Mais Efeitos e Desempenho

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes