📌 useRef: referencias y manipulación de elementos en React

El Hook useRef permite crear una referencia mutable que no provoca un renderizado cuando cambia su valor. Es ideal para acceder directamente a elementos del DOM o para almacenar valores que deben persistir entre renderizados sin generar actualizaciones del componente.

---

1️⃣ ¿Qué es useRef?

En pocas palabras, useRef es como una “caja” que guarda un valor o una referencia a un elemento del DOM.

import { useRef } from "react";

function Ejemplo() {
  const referencia = useRef(null); // crea una referencia vacía

  return <div ref={referencia}>Hola Mundo</div>;
}
  

En este caso, la variable referencia apunta directamente al elemento <div>, lo que permite manipularlo sin usar document.querySelector().

---

2️⃣ Manipular el DOM directamente con useRef

Puedes cambiar propiedades o ejecutar métodos del DOM, como enfocar un input o modificar su valor.

import { useRef } from "react";

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

  const enfocar = () => {
    inputRef.current.focus(); // accede al elemento real del DOM
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Escribe algo..." />
      <button onClick={enfocar}>Enfocar input</button>
    </div>
  );
}

export default EnfocarInput;
  

Ejemplo visual: enfocar input

---

3️⃣ Guardar valores persistentes sin causar renderizado

useRef también se usa para guardar valores que deben mantenerse entre renderizados, como un contador o una referencia a un valor anterior.

import { useRef, useState, useEffect } from "react";

function ContadorConRef() {
  const [contador, setContador] = useState(0);
  const renderizados = useRef(0); // no causa renderizado

  useEffect(() => {
    renderizados.current += 1;
  });

  return (
    <div>
      <p>Contador: {contador}</p>
      <p>Renderizados: {renderizados.current}</p>
      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
    </div>
  );
}

export default ContadorConRef;
  

Ejemplo visual de contador con referencia

Contador: 0

Renderizados: 0

---

4️⃣ Diferencia entre useRef y useState

• ⚙️ useState: provoca un renderizado cuando cambia su valor.
• 📦 useRef: mantiene su valor entre renderizados, pero no los dispara.

💡 Consejo: usa useRef cuando necesites guardar información mutable sin actualizar la UI.

---

5️⃣ Casos de uso comunes

• 🎯 Acceder y manipular elementos del DOM directamente.
• ⏱️ Guardar valores anteriores para comparaciones.
• 💾 Mantener valores persistentes entre renderizados.
• 🎬 Integrar librerías externas (por ejemplo, Canvas, D3, o mapas).

---

6️⃣ Resumen

useRef es una herramienta versátil en React que te permite acceder al DOM y mantener valores entre renderizados sin causar re-render. Es clave para manejar interactividad avanzada y optimizar el rendimiento de tus componentes.

• 📍 Evita el prop drilling del DOM.
• 🧠 No causa renderizados innecesarios.
• ⚡ Útil para trabajar con inputs, animaciones y librerías externas.

---

← Volver al índice