React: Encaminhamento de Refs

Uma técnica nada comum, mas necessária em casos específicos. O encaminhamento de Refs é uma técnica que possibilita aos componentes pais transferirem Refs aos seus componentes filhos.

Mas, antes de tudo, o que são Refs?

Refs nos fornecem uma forma de acessar os elementos do DOM (Document Object Model) e criar uma variável mutável em componentes funcionais.

De acordo com a própria documentação, existem alguns cenários que as Refs se encaixam perfeitamente:

• Gerenciamento de foco, seleção de texto, ou reprodução de mídia.
• Engatilhar animações imperativas.
• Integração com bibliotecas DOM de terceiros.

Concretamente, uma Ref é um objeto que possui a propriedade current, esta propriedade é mutável e pode conter qualquer valor.

Acessando elementos do DOM

Vamos montar um pequeno componente para demonstrar a utilização de Refs. Este exemplo nos mostrará como utilizar Refs para acessar elementos do DOM.

O único objetivo desse componente será focar o input logo que for renderizado.

Componente Funcional

Componente de Classe

Em ambos os casos, O React irá atribuir para a propriedade current o elemento DOM quando o componente for montado, e atribuirá null de volta quando ele for desmontado.

Observe que em componentes funcionais utilizamos o hook useRef e em componentes de classe utilizamos o método createRef . Existe uma diferença fundamental entre eles.

O hook useRef salva seu valor entre renderizações e, consequentemente, não irá criar uma nova Ref para cada re-renderização.

Já o método createRef sempre irá criar uma nova Ref, ou seja, ele não salva seu valor entre renderizações e cria uma nova Ref para cada re-renderização. Em componentes de classe, as Refs geralmente são atribuídas a uma propriedade de instância, para que elas possam ser referenciadas em todo o componente e para que possam ser mantidas entre as novas renderizações do componente de classe.

De qualquer forma, você pode conhecer mais sobre a diferença aqui.

Persistindo uma variável mutável

Para demonstrar a criação de uma váriavel mutável que mantém seu estado após as re-renderizações, vamos montar um componente de Timer.

Aqui, você pode ver que estamos utilizando o useRef para armazenar um ID de setInterval entre renderizações, permitindo criar um cronômetro no primeiro carregamento e limpá-lo na desmontagem.

useRef

Até este ponto você já viu alguns exemplos do uso deste hook, mas vamos deixar claro seu comportamento. useRef retorna um objeto ref mutável, no qual a propriedade .current é inicializada para o argumento passado (initialValue).

Considerações importantes

• Tenha em mente que o useRef não avisa quando o conteúdo é alterado. Já que, diferente do useState, o useRef não possui uma função para atualizar seu estado, deste modo o React não saberá quando atualizar a sua UI. Ou seja, mudar a propriedade .current não causa uma nova renderização.
• A Ref persistirá durante todo o ciclo de vida do componente.

Casos de uso

• Pulando a primeira execução do useEffect.
• Um contador de renderizações.

Como encaminhar Refs entre seus componentes

A primeira coisa que você precisa entender é que componentes funcionais ou de classe não recebem o argumento ref, e ref também não está disponível nas props.

O método forwardRef permite que os componentes recebam Refs.

Componente Funcional

Componente de Classe

Utilizando um componente Wrapper para nossa classe.

Conclusões

• Ref é como uma “caixa” que pode armazenar qualquer valor mutável em sua propriedade .current.
• useRef é utilizado para criar Refs que podem ser utilizadas para acessar imperativamente a um componente filho.
• useRef pode ser utilizado para manter váriaveis mutáveis entre renderizações, similar as propriedade de instância de um componente de classe.
• createRef e useRef não fazem a mesma coisa. Não deixe de conferir mais sobre isso aqui.
• forwardRef é uma função que possibilita o encaminhamento de Refs entre componentes.

Referências

All About the React useRef Hook with a Real World Example

Encaminhamento de Refs - React

Refs e o DOM - React