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.

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.