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.