Como usar ref em React com TypeScript

Neste artigo você aprenderá a como usar ref em React com TypeScript, para manipulação de elementos específicos no seu projeto

Fala programador(a), beleza? Bora aprender mais sobre React JS!

Trabalhar com React é, por si só, uma experiência enriquecedora e poderosa. Contudo, quando você adiciona TypeScript à mistura, obtém uma combinação potente que pode melhorar significativamente a robustez e a manutenibilidade do seu código.

Um dos conceitos fundamentais em React é o uso de ref, que permite acessar diretamente um elemento ou componente do DOM.

Quando usamos isso com TypeScript, surgem algumas nuances que precisamos entender. Neste artigo, vamos desvendar esses detalhes.

Entendendo ref em React

Antes de nos aprofundarmos em como usar ref com TypeScript, é crucial entender o que é ref e por que ele é usado no React.

O que é ref?

ref é um atributo que você pode adicionar a elementos ou componentes React para obter uma referência ao nó do DOM correspondente.

Ele é útil em situações em que você precisa acessar diretamente um elemento, como focar em um input ou medir suas dimensões.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Uso básico de ref em React

import React, { useRef, useEffect } from 'react';

function MeuComponente() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} type="text" placeholder="Digite algo aqui" />;
}

No exemplo acima, estamos usando ref para focar automaticamente em um input quando o componente é montado.

Introduzindo TypeScript

Quando usamos TypeScript com React, queremos garantir que nossos tipos estejam corretos. Isso inclui garantir que as refs tenham o tipo correto.

Tipando ref com TypeScript

Ao usar ref com TypeScript, você precisa garantir que o tipo da ref corresponda ao tipo do elemento ou componente ao qual você está se referindo.

Tipando uma ref para um elemento input:

import React, { useRef, useEffect } from 'react';

function MeuComponente() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} type="text" placeholder="Digite algo aqui" />;
}

Note que usamos useRef<HTMLInputElement>(null). Isso garante que inputRef é do tipo HTMLInputElement.

Usamos o operador opcional (?.) antes de chamar focus() para garantir que não tentaremos chamar focus em null.

Dicas ao usar ref com componentes personalizados

Se você estiver usando ref com componentes personalizados, é uma boa prática usar forwardRef para encaminhar a ref ao elemento ou componente desejado.

import React, { forwardRef } from 'react';

const InputPersonalizado = forwardRef<HTMLInputElement>((props, ref) => (
  <input ref={ref} {...props} />
));

function MeuComponente() {
  const inputRef = useRef<HTMLInputElement>(null);

  return <InputPersonalizado ref={inputRef} type="text" placeholder="Digite algo aqui" />;
}

Neste exemplo, InputPersonalizado encaminha a ref para o elemento input interno. Isso permite que você use a ref como se estivesse se referindo diretamente ao input.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

O uso de ref em React é uma maneira poderosa de acessar e interagir diretamente com elementos e componentes do DOM.

Ao combinar isso com TypeScript, garantimos que nosso código não apenas funcione corretamente, mas também seja seguro e robusto em termos de tipos.

A chave é entender como tipar corretamente suas refs e, se necessário, como encaminhá-las usando forwardRef.

Com essas ferramentas em mãos, você estará bem equipado para criar aplicações React com TypeScript de alto desempenho e à prova de erros.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.

<h3>ref ou state: qual dos dois usar?</h3>

Essa é a dúvida que aparece na sequência, sempre

A regra de bolso é curta: se o valor muda o que o usuário enxerga na tela, ele é state

Se o valor é bastidor (uma referência a um elemento, o id de um timer, um contador interno que ninguém vê), ele é ref

A diferença prática está no redesenho: mexer no state faz o React redesenhar o componente, mexer no ref não

Pensa assim: state é o que a tela enxerga, ref é o que só o seu código enxerga

E tem um efeito colateral bom nisso: se você usar ref pra guardar algo que não aparece na tela, você evita um monte de renderização à toa 🙂

<h3>Por que o ref vive dentro do useEffect?</h3>

Repara que o focus() não está solto no corpo do componente, e isso não é frescura

Na primeira passada o React ainda está montando a tela, e o input simplesmente não existe ainda pra ser focado

O ref só é preenchido depois que o elemento entra no DOM, e o useEffect roda justamente nesse "depois"

Tome cuidado! Se você ler o .current direto no corpo do componente, vai achar um valor vazio e passar meia hora culpando o TypeScript por um problema que é de tempo, não de tipo

Já me ferrei uma vez com isso haha

Regra pra levar pra casa: leia o .current dentro de um useEffect ou dentro de um evento (clique, submit, e por aí vai), nunca durante a renderização

<h3>E se não for um input? Tipando ref pra outros elementos:</h3>

O HTMLInputElement não é mágica, é só o tipo do elemento pro qual você está apontando

Trocou o elemento, troca o tipo:

<pre><code>const divRef = useRef&lt;HTMLDivElement&gt;(null) const botaoRef = useRef&lt;HTMLButtonElement&gt;(null) const videoRef = useRef&lt;HTMLVideoElement&gt;(null) const formRef = useRef&lt;HTMLFormElement&gt;(null)</code></pre>

O padrão quase sempre é HTML + o nome do elemento + Element, e o autocomplete do editor te entrega o resto quando o nome foge da regra

Caso o TypeScript reclame que os tipos não batem na hora de entregar a ref pro elemento, o motivo costuma ser esse: a ref foi tipada como um elemento e pendurada em outro

Bom teste pra fixar: pendura de propósito uma ref de input numa div e olha o que o editor fala 😀

<h3>Antes de sair copiando o forwardRef:</h3>

Esse é o trecho do artigo que mais envelhece, então vale o aviso

A forma como um componente seu recebe uma ref vinda de fora já mudou de figura mais de uma vez na história do React

O conceito é o mesmo de sempre (o componente de fora precisa alcançar o elemento lá de dentro), o que muda com o tempo é quanta cerimônia você escreve pra isso

Então faz o seguinte: antes de colar o código no projeto, confere a versão do React que está no seu package.json e bate com a documentação oficial dessa versão

E se o seu editor riscar o forwardRef com aquele tracinho de depreciado, não ignora, é o próprio React te avisando que naquela versão existe um caminho mais curto pro mesmo resultado

Dois minutos de conferida agora te poupam uma tarde de warning no console 😀