O forwardRef no React é um recurso que permite passar referências diretamente para componentes filhos, facilitando o acesso a elementos nativos, como inputs e buttons, de uma forma controlada e reutilizável. Apesar de não ser tão amplamente utilizado em todos os projetos, o forwardRef se torna necessário em casos específicos, como quando precisamos controlar o foco em um formulário, como visto em um cenário recente.
Quando Usar forwardRef?
Durante a refatoração de um formulário de login, nos deparamos com a necessidade de focar automaticamente em um campo de senha após o usuário pressionar "Enter" no campo de e-mail. O problema surgiu porque, ao criar um componente customizado de input, a referência (ref) não estava sendo repassada corretamente para o input real no DOM. É aqui que o forwardRef entra em cena, permitindo que a referência seja passada de forma eficiente para o componente filho.
Implementação Passo a Passo
A seguir, mostrarei como usamos o forwardRef para solucionar esse problema:
- Criação do Componente com forwardRef: No React, ao usar o forwardRef, devemos passá-lo como uma função que recebe props e ref. Dentro dessa função, você repassa a referência ao elemento desejado, neste caso, o input.
- Utilizando o Componente: Agora que o componente está preparado para aceitar uma referência, podemos utilizá-lo dentro de um formulário ou qualquer outra parte da aplicação, garantindo o controle do foco ou qualquer outra manipulação do DOM necessária.
- Definindo Tipagem para Refs: Para evitar erros de tipagem, especialmente quando trabalhamos com TypeScript, é importante definir corretamente a tipagem das referências. No exemplo acima, utilizamos HTMLInputElement para assegurar que a referência esteja sendo aplicada ao input correto.
Benefícios e Dicas
- Controle Preciso: O forwardRef permite maior controle sobre os elementos do DOM, principalmente em situações onde precisamos manipular diretamente os componentes filhos.
- Facilidade de Reuso: Ao encapsular esse comportamento em um componente, você cria uma solução reutilizável para outras partes da aplicação.
- Performance: O uso correto de refs evita renderizações desnecessárias, o que pode melhorar a performance em aplicações mais complexas.
Quando Não Usar forwardRef?
Embora útil, o forwardRef não é algo que deve ser usado indiscriminadamente. Na maior parte das vezes, trabalhar com o estado e props normais do React já é o suficiente. Utilize o forwardRef apenas quando for necessário acessar diretamente um elemento DOM, como no caso de controle de foco ou integração com bibliotecas de terceiros que exigem manipulação direta do DOM.
Conclusão
O forwardRef é uma ferramenta poderosa, mas seu uso deve ser criterioso. Ele resolve problemas específicos de referência a elementos, como vimos no caso do formulário de login. Em resumo, ele não é algo para ser utilizado em todos os componentes, mas sim em situações onde o controle direto do DOM é necessário.
Assista nossa aula completa
Links mencionados no vídeo:
Outros cursos do canal:
☪️ Curso de estilização no React
⭐️ Curso de React com typescript
👑 React, Material UI 5 e Typescript
Comentários
Postar um comentário