Como acessar elementos no DOM no React JS

Neste artigo você aprenderá a como acessar elementos no DOM no React, para poder manipular o conteúdo ou estilos

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

No desenvolvimento com React JS, muitas vezes surge a necessidade de acessar e manipular elementos diretamente no DOM.

Embora o React seja projetado para abstrair muitas das interações diretas com o DOM, existem situações em que essa abordagem é necessária.

Neste artigo, vamos explorar como o React JS permite o acesso direto aos elementos do DOM e como podemos fazer isso de forma otimizada.

A abordagem tradicional: o problema

Historicamente, em JavaScript puro, acessar elementos do DOM é feito através de métodos como getElementById(), getElementsByClassName(), entre outros.

Porém, no React, essa abordagem não é a mais apropriada, pois pode quebrar a natureza declarativa e reativa da biblioteca.

Refs no React

O React introduz um conceito chamado ref (referência) que permite acessar elementos do DOM.

A ref é como uma “caixa” que pode conter uma referência a um elemento do DOM ou a uma instância de um componente.

Criando uma ref

No React, usamos o hook useRef para criar uma ref. Vamos ver um exemplo simples:

import React, { useRef } from 'react';

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

  const focarNoInput = () => {
    minhaRef.current.focus();
  }

  return (
    <div>
      <input ref={minhaRef} type="text" />
      <button onClick={focarNoInput}>Focar no input</button>
    </div>
  );
}

No exemplo acima, criamos uma ref para o elemento input.

Com a ajuda do botão, podemos focar diretamente no input usando a ref.

Quando usar refs?

Refs são úteis em várias situações:

1. Focar em inputs: Como no exemplo acima, refs são frequentemente usadas para focar em elementos input.
2. Integração com bibliotecas de terceiros: Às vezes, ao usar bibliotecas externas, você precisa acessar diretamente um elemento do DOM.
3. Animações: Em certos casos, para criar animações complexas, pode ser necessário acessar o DOM diretamente.

Refs com componentes de classe

Embora estejamos focando em componentes funcionais, vale mencionar que, em componentes de classe, as refs são criadas de maneira ligeiramente diferente, utilizando React.createRef().

Dicas para trabalhar com refs

Evite o uso excessivo

A natureza declarativa do React torna desnecessário o acesso direto ao DOM na maioria das vezes. Refs são ferramentas poderosas, mas devem ser usadas com moderação.

Sempre que possível, tente resolver o problema utilizando o fluxo de dados do React.

Acesso seguro a refs

Ao tentar acessar um elemento através de uma ref, certifique-se de que ele realmente existe. Isso pode ser feito com uma simples verificação:

if (minhaRef.current) {
  // Fazer algo com minhaRef.current
}

Integre com outros hooks

Refs podem ser usadas em conjunto com outros hooks. Por exemplo, você pode combinar uma ref com o hook useEffect para realizar operações no DOM após o componente ser montado.

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

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

  useEffect(() => {
    if (divRef.current) {
      divRef.current.textContent = 'Texto atualizado via ref e useEffect!';
    }
  }, []);

  return <div ref={divRef}>Texto inicial</div>;
}

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

Conclusão

No universo do React, acessar elementos no DOM de forma direta pode parecer contra-intuitivo inicialmente, dada a abstração proporcionada pela biblioteca.

Contudo, em algumas situações, essa operação é necessária e, para tais casos, o React oferece uma solução otimizada através das refs.

Ao integrar esta funcionalidade em seus projetos, lembre-se de usar com cautela, priorizando sempre as soluções declarativas que o React oferece.

Com essa abordagem, você garantirá um código mais limpo, manutenível e em harmonia com os princípios do React.

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

Por que a ref vem vazia no começo?

Repare que a gente escreve useRef(null) e não useRef(document.querySelector(...))

O motivo é simples: antes do componente aparecer na tela, não existe elemento nenhum pra referenciar

O current nasce vazio e só passa a apontar pro elemento de verdade depois que o React monta ele

É exatamente por isso que aquele if (minhaRef.current) existe

Antecipando o erro que todo mundo toma na primeira vez: se você tentar chamar .focus() direto no corpo do componente, vai bater num erro dizendo que não é possível ler uma propriedade de null

A regra prática que resolve isso:

Mexa na ref dentro de um evento (clique, submit, blur) ou dentro do useEffect

Nunca no meio do corpo do componente, porque ali a tela ainda nem existe

Já me ferrei com isso e o pior é que o erro parece que veio do nada 🙂

Ref ou state? Como decidir sem errar

Essa é a dúvida que trava mais gente do que a sintaxe em si

O jeito fácil de lembrar é assim: state é pra valor que muda o que aparece na tela, ref é pra valor que você guarda mas que a tela não precisa redesenhar

Mudar uma ref não dispara um novo render

Se o valor precisa aparecer pro usuário, é state

Se é foco, scroll, medida do elemento, id de um timer, valor anterior de alguma coisa, é ref

O teste de 5 segundos: pergunte "se isso mudar, a tela muda?"

Se a resposta for sim, você quer state

Se for não, ref é a ferramenta certa e ainda te poupa renders desnecessários

E quando são vários elementos, um pra cada item da lista?

Aqui muita gente tenta chamar useRef dentro do map e toma erro

Motivo: hook não pode ser chamado dentro de loop ou condição, ele precisa rodar sempre na mesma ordem

O caminho é ter UMA ref só, guardando um objeto, e ir preenchendo esse objeto conforme cada elemento é renderizado:

const itemsRef = useRef({});

return (
<ul>
{itens.map((item) => (
{item.nome}
</li>
))}
</ul>
);

Muito usado pra rolar a tela até um item da lista, tipo aqueles menus de navegação por âncora

Posso simplesmente usar document.querySelector dentro do componente?

Tecnicamente roda, e é aí que mora a armadilha

O querySelector procura no documento inteiro, sem nenhuma garantia de que aquele elemento é o do SEU componente

Coloque duas instâncias do mesmo componente na tela e ele vai pegar o primeiro que achar, não o certo

Fora que o React pode recriar aquele nó em um render seguinte, e a variável que você guardou fica apontando pra um elemento que já saiu da tela

A ref resolve os dois problemas de uma vez: ela é amarrada ao elemento daquela instância e o próprio React se encarrega de manter ela apontando pro lugar certo

Se você vem do JavaScript puro, pensa assim: a ref é o getElementById do React, só que ciente do ciclo de vida do componente

Um aviso sobre esse exemplo do textContent:

Ele serve pra mostrar que a ref realmente chegou no elemento certo, e cumpre bem esse papel

Mas no dia a dia, mudar texto na mão pela ref é justamente o que você quer evitar

O React não sabe que você mexeu ali, então num próximo render ele pode sobrescrever aquele texto e você fica caçando fantasma

Texto que muda é trabalho de state

Guarde a ref pra coisas que o React não faz por você: foco, scroll, medir tamanho de um elemento, plugar uma biblioteca externa que exige o nó do DOM

Essa é a linha que separa usar ref e brigar com o React