useRef as Container Ref como Contêiner

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

useRef as Container Ref como Contêiner

Um ref não serve só para o DOM: é uma caixa de nota adesiva que sobrevive a renderizações e serve a dados como ids de temporizador, o valor anterior ou uma flag de montado que muda sem que você queira uma re-renderização. É mais leve que state e mais seguro que uma variável de nível de módulo, porque cada instância de componente é isolada. Um ref é o lar certo para dados que descrevem o processo e não a interface: ele precisa sobreviver a uma renderização, mas nada na tela depende dele.

ℹ️ 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 timerRef = useRef(null)
timerRef.current = setInterval(...)   // store
clearInterval(timerRef.current)       // read

// the lazy initialization idiom:
if (ref.current === null) ref.current = expensiveInit()

Retorna：Sem valor de retorno; esta entrada descreve um padrão de codificação e não uma função.

▶ Exemplo

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

Saída：

Cada clique em +1 eleva o número em "Current" enquanto "previous" continua mostrando o valor de antes da mudança — o ref guarda um snapshot histórico sem causar renderizações extras.

💡 Pontos-chave

🏷️ Mais Efeitos e Desempenho

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

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