➡️ Transiciones y referencias (useRef) en componentes React

En React, el hook useRef() permite crear una referencia mutable que puede almacenar un valor o apuntar a un elemento del DOM sin causar una nueva renderización del componente.

Este hook se usa comúnmente para:

• Acceder directamente a elementos del DOM (como inputs o divs).
• Guardar valores que deben persistir entre renderizados sin actualizar el estado.
• Controlar animaciones o transiciones.

---

1️⃣ Crear una referencia y usarla con un elemento

En este ejemplo, usamos useRef para enfocar automáticamente un campo de entrada cuando el componente se monta.

import { useRef, useEffect } from "react";

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

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} placeholder="Escribe algo..." />
    </div>
  );
}

export default EnfocarInput;
  

El input se enfoca automáticamente al cargar (simulado).

---

2️⃣ Usar useRef para almacenar valores persistentes

A diferencia del estado (useState), cambiar un valor en useRef no provoca un re-render. Es útil para guardar contadores o valores intermedios sin afectar la interfaz.

import { useRef } from "react";

function ContadorSilencioso() {
  const contador = useRef(0);

  const incrementar = () => {
    contador.current += 1;
    console.log("Contador actual:", contador.current);
  };

  return (
    <button onClick={incrementar}>
      Incrementar sin renderizar
    </button>
  );
}

export default ContadorSilencioso;
  

El valor se incrementa internamente sin redibujar la interfaz.

---

3️⃣ Control de transiciones con useRef

Podemos usar referencias para aplicar animaciones o transiciones personalizadas sobre elementos DOM. En este ejemplo, cambiamos el color de una caja con una suave transición.

import { useRef } from "react";

function CajaAnimada() {
  const cajaRef = useRef(null);

  const cambiarColor = () => {
    cajaRef.current.style.transition = "background-color 0.5s ease";
    cajaRef.current.style.backgroundColor = "#3498db";
  };

  return (
    <div>
      <div
        ref={cajaRef}
        style={{
          width: "100px",
          height: "100px",
          backgroundColor: "#e74c3c",
          margin: "10px auto",
          borderRadius: "8px"
        }}
      ></div>
      <button onClick={cambiarColor}>Cambiar color</button>
    </div>
  );
}

export default CajaAnimada;
  

Ejemplo visual de transición controlada con useRef.

---

4️⃣ Buenas prácticas con useRef

• ✅ No modificar directamente el DOM salvo en casos necesarios (enfocar, animar, medir).
• ✅ No usar useRef como sustituto del estado si el cambio debe reflejarse en la UI.
• ✅ Ideal para librerías externas, animaciones y elementos no controlados.

---

5️⃣ Resumen

El hook useRef es una herramienta poderosa para mantener referencias a elementos o valores sin provocar renderizados innecesarios. Combinado con transiciones y efectos, permite crear interacciones fluidas y optimizadas.

← Volver al índice