Aprende cuándo usar useRef para interactuar con elementos del DOM o guardar valores mutables sin disparar re-renders.
useRef es útil para dos casos clave: guardar una referencia a un nodo del DOM y mantener valores mutables entre renders sin volver a pintar la UI.
A diferencia de useState, cambiar `ref.current` no dispara render. Esa es su fortaleza y también una fuente de errores si lo usas para datos visuales.
En proyectos reales, useRef aparece mucho en foco automático de inputs, control de scroll, integración con librerías externas y timers.
La regla práctica: si el dato debe reflejarse en pantalla, usa estado; si es un detalle técnico de sincronización o referencia, usa ref.
No compiten: resuelven problemas distintos.
useState guarda datos de UI y provoca render cuando cambian.
useRef guarda valores mutables que persisten entre renders sin afectar al pintado.
Usar ref para estado visual suele crear desincronización entre dato real y UI.
React evita manipulación imperativa, pero hay casos legítimos donde ref es la vía correcta.
La mayoría de usos correctos de ref están ligados a integración o control de interacción.
Persistir id de interval/timeout para limpiarlo después.
Medir dimensiones de un nodo tras render para cálculos de layout.
Mantener última versión de un callback en casos concretos de suscripciones.
Guardar referencias a objetos externos como timelines, instancias de librerías o nodos 3D. Ese patrón reaparece en <a href="/curso/gasp-three-js/leccion/gasp-three-js-canvas-camara-r3f-escenas/">Canvas, cámara y frameloop en R3F</a>.
Aprende cuándo usar useRef para interactuar con elementos del DOM o guardar valores mutables sin disparar re-renders.
Código del tema: Componentes, estado y render declarativo
No compiten: resuelven problemas distintos.
useState guarda datos de UI y provoca render cuando cambian.
useRef guarda valores mutables que persisten entre renders sin afectar al pintado.
Usar ref para estado visual suele crear desincronización entre dato real y UI.
React evita manipulación imperativa, pero hay casos legítimos donde ref es la vía correcta.
import { useEffect, useRef } from 'react';
function SearchBox() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current?.focus();
}, []);
return <input ref={inputRef} placeholder="Buscar..." />;
}La mayoría de usos correctos de ref están ligados a integración o control de interacción.
Persistir id de interval/timeout para limpiarlo después.
Medir dimensiones de un nodo tras render para cálculos de layout.
Mantener última versión de un callback en casos concretos de suscripciones.
Guardar referencias a objetos externos como timelines, instancias de librerías o nodos 3D. Ese patrón reaparece en Canvas, cámara y frameloop en R3F.