React Hook - useRef §

---

O useRef é um React Hook que fornece uma maneira de interagir com elementos do DOM e persistir valores entre re-renderizações sem acionar uma nova renderização. Este Hook é útil para acessar e manipular diretamente elementos do DOM (como se fosse utilizar o document.querySelector), bem como para armazenar valores que precisam persistir ao longo do ciclo de vida de um componente sem causar uma nova renderização quando são modificados.

Sintaxe §

A sintaxe básica do useRef envolve a criação de um objeto de referência (ref) usando o Hook, que pode ser utilizado para armazenar referências a elementos do DOM ou valores persistentes.

import React, { useRef, useEffect } from 'react';
 
const MeuComponente = () => {
  const meuRef = useRef(null);
 
  // Utilizar a ref para acessar um elemento do DOM
  useEffect(() => {
    if (meuRef.current) {
      console.log('Elemento do DOM:', meuRef.current);
    }
  }, []);
 
  return (
    <div ref={meuRef}>
      {/* Conteúdo do componente */}
    </div>
  );
};

Neste exemplo, meuRef é criado usando useRef e associado ao elemento <div> usando a propriedade ref. A ref é então utilizada dentro de um useEffect para acessar o elemento do DOM após a renderização.

Caso de uso §

Um caso de uso comum do useRef é acessar e interagir com elementos do DOM, especialmente em operações que não precisam acionar uma nova renderização. Por exemplo, ao manipular o foco de um campo de entrada:

import React, { useRef, useEffect } from 'react';
 
const CampoDeEntrada = () => {
  const inputRef = useRef(null);
 
  // Efeito para focar no campo de entrada ao montar o componente
  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);
 
  return <input ref={inputRef} />;
};

Neste exemplo, a ref inputRef é utilizada para acessar e focar no campo de entrada sem acionar uma nova renderização.

Manipulando valores persistentes §

O useRef também pode ser utilizado para armazenar valores que precisam persistir entre re-renderizações sem causar uma nova renderização quando são modificados. Diferentemente do estado (useState), a alteração de um valor em uma ref não desencadeia uma renderização.

import React, { useRef, useEffect } from 'react';
 
const MeuComponente = () => {
  // Criar uma ref para armazenar um valor persistente
  const contadorRef = useRef(0);
 
  useEffect(() => {
    console.log('Contador:', contadorRef.current);
  }, [contadorRef.current]);
 
  const incrementar = () => {
    contadorRef.current += 1;
  };
 
  return (
    <div>
      <p>Contador: {contadorRef.current}</p>
      <button onClick={incrementar}>Incrementar</button>
    </div>
  );
};

No exemplo acima, contadorRef é utilizado para armazenar um valor persistente (0) que não aciona uma nova renderização quando é incrementado.

Referências §

---

• Curso de React.Js e Next.Js (nível intermediário e avançado)