Refs do React: Desmistificando useRef vs. createRef

No mundo dinâmico do desenvolvimento React, gerenciar eficientemente o estado dos componentes e interagir com o Document Object Model (DOM) é crucial. As Refs do React fornecem um mecanismo para acessar e manipular elementos do DOM ou componentes React diretamente. Os dois métodos principais para criar Refs são useRef e createRef. Embora ambos sirvam ao propósito de criar Refs, eles diferem em sua implementação e casos de uso. Este guia visa desmistificar essas duas abordagens, fornecendo clareza sobre quando e como aproveitar cada uma delas de forma eficaz em seus projetos React, especialmente ao desenvolver para um público global.

Entendendo as Refs do React

Uma Ref (abreviação de referência) é um recurso do React que permite acessar um nó do DOM ou um componente React diretamente. Isso é particularmente útil quando você precisa:

• Manipular diretamente um elemento do DOM, como focar um campo de entrada.
• Acessar métodos ou propriedades de um componente filho.
• Gerenciar valores que persistem entre renderizações sem causar novas renderizações (semelhante a variáveis de instância em componentes de classe).

Embora o React incentive uma abordagem declarativa, onde a UI é gerenciada por meio de estado e props, há situações em que a manipulação direta é necessária. As Refs fornecem uma maneira de preencher a lacuna entre a natureza declarativa do React e as operações imperativas do DOM.

createRef: A Abordagem dos Componentes de Classe

createRef é um método fornecido pelo React. É usado principalmente em componentes de classe para criar Refs. Cada vez que um componente de classe é instanciado, createRef cria um novo objeto Ref. Isso garante que cada instância do componente tenha sua própria Ref exclusiva.

Sintaxe e Uso

Para usar createRef, você primeiro declara uma Ref em seu componente de classe, geralmente no construtor. Em seguida, você anexa a Ref a um elemento do DOM ou a um componente usando o atributo ref.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    // Acessa o elemento do DOM após o componente ser montado
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}

Neste exemplo, this.myRef é criado usando React.createRef(). Em seguida, é atribuído ao atributo ref do elemento de entrada. Após o componente ser montado (em componentDidMount), você pode acessar o nó do DOM real usando this.myRef.current e realizar operações nele (neste caso, focando a entrada).

Exemplo: Focando um Campo de Entrada

Vamos considerar um cenário em que você deseja focar um campo de entrada automaticamente quando um componente é montado. Este é um caso de uso comum para Refs, especialmente em formulários ou elementos interativos.

class FocusInput extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }

  render() {
    return (
      

        
      
    );
  }
}

Neste exemplo, FocusInput foca o campo de entrada imediatamente após a montagem. Isso pode melhorar a experiência do usuário, direcionando a atenção do usuário para o elemento de entrada assim que o componente é renderizado.

Considerações Importantes com createRef

• Apenas Componentes de Classe: createRef foi projetado para uso em componentes de classe. Embora tecnicamente possa funcionar em componentes funcionais, não é o uso pretendido e pode levar a um comportamento inesperado.
• Nova Ref a Cada Instância: Cada instância de um componente de classe obtém seu próprio createRef. Isso é importante para manter o isolamento entre as instâncias do componente.

useRef: O Hook de Componentes Funcionais

useRef é um Hook que foi introduzido no React 16.8. Ele fornece uma maneira de criar objetos Ref mutáveis em componentes funcionais. Diferente de createRef, useRef retorna o mesmo objeto Ref toda vez que o componente é renderizado. Isso o torna ideal para persistir valores entre renderizações sem acionar novas renderizações.

Sintaxe e Uso

Usar useRef é simples. Você chama o Hook useRef, passando um valor inicial. O Hook retorna um objeto com uma propriedade .current, que você pode então usar para acessar e modificar o valor.

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

function MyFunctionalComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    // Acessa o elemento do DOM após o componente ser montado
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return ;
}

Neste exemplo, useRef(null) cria uma Ref com um valor inicial de null. O Hook useEffect é usado para acessar o elemento do DOM após a montagem do componente. A propriedade myRef.current contém a referência ao elemento de entrada, permitindo que você o foque.

Exemplo: Rastreando Valores Anteriores de Props

Um caso de uso poderoso para useRef é rastrear o valor anterior de uma prop. Como as alterações nas Refs não acionam novas renderizações, você pode usá-las para armazenar valores que deseja persistir entre renderizações sem afetar a UI.

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

function PreviousValueComponent({ value }) {
  const previousValue = useRef();

  useEffect(() => {
    previousValue.current = value;
  }, [value]);

  return (
    

      
Valor Atual: {value}
      
Valor Anterior: {previousValue.current}
    
  );
}

Neste exemplo, previousValue.current armazena o valor anterior da prop value. O Hook useEffect atualiza a Ref sempre que a prop value muda. Isso permite que você compare os valores atual e anterior, o que pode ser útil para detectar alterações ou implementar animações.

Considerações Importantes com useRef

• Apenas Componentes Funcionais: useRef é um Hook e só pode ser usado em componentes funcionais ou Hooks personalizados.
• Persiste Entre Renderizações: O Hook useRef retorna o mesmo objeto Ref em cada renderização. Isso é fundamental para sua capacidade de persistir valores sem acionar novas renderizações.
• Propriedade .current Mutável: Você pode modificar diretamente a propriedade .current do objeto Ref.
• Valor Inicial: Você pode fornecer um valor inicial para useRef. Este valor será atribuído à propriedade .current quando o componente for renderizado pela primeira vez.
• Sem Novas Renderizações: Modificar a propriedade .current de uma Ref não causa uma nova renderização do componente.

useRef vs. createRef: Uma Comparação Detalhada

Agora que exploramos tanto useRef quanto createRef individualmente, vamos compará-los lado a lado para destacar suas principais diferenças e quando escolher um em detrimento do outro.

Recurso	useRef	createRef
Tipo de Componente	Componentes Funcionais	Componentes de Classe
Hook ou Método	Hook	Método
Instância da Ref	Retorna o mesmo objeto Ref em cada renderização	Cria um novo objeto Ref em cada instância do componente
Casos de Uso	Acessar elementos do DOM Persistir valores entre renderizações sem acionar novas renderizações Rastrear valores anteriores de props Armazenar valores mutáveis que não causam novas renderizações	Acessar elementos do DOM Acessar métodos de componentes filhos

Escolhendo a Ref Certa: Um Guia de Decisão

Aqui está um guia simples para ajudá-lo a escolher entre useRef e createRef:

• Você está trabalhando com um componente funcional? Use useRef.
• Você está trabalhando com um componente de classe? Use createRef.
• Você precisa persistir um valor entre renderizações sem acionar novas renderizações? Use useRef.
• Você precisa rastrear o valor anterior de uma prop? Use useRef.

Além da Manipulação do DOM: Casos de Uso Avançados para Refs

Embora acessar e manipular elementos do DOM seja um caso de uso primário para as Refs, elas oferecem possibilidades além dessa funcionalidade principal. Vamos explorar alguns cenários avançados onde as Refs podem ser particularmente úteis.

1. Acessando Métodos de Componentes Filhos

As Refs podem ser usadas para acessar métodos definidos em componentes filhos. Isso permite que um componente pai acione ações ou recupere dados de seus filhos diretamente. Essa abordagem é particularmente útil quando você precisa de um controle refinado sobre os componentes filhos.

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  handleClick = () => {
    // Chama um método no componente filho
    this.childRef.current.doSomething();
  };

  render() {
    return (
      

        
        Acionar Ação do Filho
      
    );
  }
}

class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('Ação do componente filho acionada!');
  };

  render() {
    return 
Este é um componente filho.
;
  }
}

Neste exemplo, o ParentComponent usa uma Ref para acessar o ChildComponent e chamar seu método doSomething.

2. Gerenciando Foco e Seleção

As Refs são inestimáveis para gerenciar o foco e a seleção em campos de entrada e outros elementos interativos. Isso é crucial para criar interfaces acessíveis e amigáveis ao usuário.

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

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

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select(); // Seleciona o texto na entrada
    }
  }, []);

  return ;
}

Este exemplo foca a entrada e seleciona seu texto assim que o componente é montado.

3. Animando Elementos

As Refs podem ser usadas em conjunto com bibliotecas de animação (como GreenSock ou Framer Motion) para manipular diretamente o DOM e criar animações complexas. Isso permite um controle refinado sobre as sequências de animação.

Exemplo usando JavaScript puro para simplificar:

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

function AnimatedBox() {
  const boxRef = useRef(null);

  useEffect(() => {
    const box = boxRef.current;
    if (box) {
      // Animação simples: move a caixa para a direita
      box.animate(
        [
          { transform: 'translateX(0)' },
          { transform: 'translateX(100px)' },
        ],
        {
          duration: 1000, // 1 segundo
          iterations: Infinity, // Repetir para sempre
          direction: 'alternate',
        }
      );
    }
  }, []);

  return 
;
}

Este exemplo usa a API de Animações da Web para animar uma caixa simples, movendo-a para frente e para trás horizontalmente.

Melhores Práticas para Usar Refs do React em Aplicações Globais

Ao desenvolver aplicações React para um público global, é importante considerar como as Refs interagem com a internacionalização (i18n) e a localização (l10n). Aqui estão algumas melhores práticas:

1. Acessibilidade (A11y)

Garanta que o uso de Refs não afete negativamente a acessibilidade. Por exemplo, ao focar elementos programaticamente, considere a ordem de foco do usuário e se a mudança de foco é apropriada para leitores de tela e usuários de teclado.

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

function AccessibleFocus() {
  const buttonRef = useRef(null);

  useEffect(() => {
    const button = buttonRef.current;
    if (button) {
      // Foca apenas se o botão já não estiver focado pelo usuário
      if (document.activeElement !== button) {
        button.focus();
      }
    }
  }, []);

  return Clique em Mim;
}

2. Campos de Entrada Internacionalizados

Ao trabalhar com campos de entrada, esteja ciente dos diferentes métodos de entrada e conjuntos de caracteres usados em diferentes idiomas. Garanta que suas manipulações baseadas em Ref (por exemplo, seleção, posição do cursor) funcionem corretamente em vários tipos de entrada e localidades. Teste seus componentes exaustivamente com diferentes idiomas e métodos de entrada.

3. Layouts da Direita para a Esquerda (RTL)

Se sua aplicação suporta idiomas RTL (por exemplo, árabe, hebraico), garanta que suas manipulações do DOM usando Refs levem em conta o layout invertido. Por exemplo, ao animar elementos, considere inverter a direção da animação para idiomas RTL.

4. Considerações de Desempenho

Embora as Refs forneçam uma maneira poderosa de interagir com o DOM, o uso excessivo pode levar a problemas de desempenho. A manipulação direta do DOM ignora o DOM virtual e o processo de reconciliação do React, podendo levar a inconsistências e atualizações mais lentas. Use Refs com moderação e apenas quando necessário.

Conclusão

As Refs do React, especificamente useRef e createRef, são ferramentas essenciais para desenvolvedores React. Entender as nuances de cada abordagem e quando aplicá-las efetivamente é crucial para construir aplicações robustas e performáticas. createRef continua sendo o padrão para gerenciar Refs em componentes de classe, garantindo que cada instância tenha sua Ref exclusiva. useRef, com sua natureza persistente entre renderizações, é ideal para componentes funcionais, oferecendo uma maneira de gerenciar elementos do DOM e persistir valores sem acionar novas renderizações desnecessárias. Ao aproveitar essas ferramentas com sabedoria, você pode aprimorar a funcionalidade e a experiência do usuário de suas aplicações React, atendendo a um público global com interfaces acessíveis e performáticas.

À medida que o React continua a evoluir, dominar esses conceitos fundamentais capacitará você a criar experiências web inovadoras e amigáveis ao usuário que transcendem barreiras geográficas e culturais. Lembre-se de priorizar a acessibilidade, a internacionalização e o desempenho para entregar aplicações verdadeiramente globais.