React
Explica cómo useRef conserva valores mutables entre renders sin provocar nuevas renderizaciones y cómo referencia nodos DOM de forma segura.
devuelve el mismo objeto entre renders. Cambiar no solicita un render.
useRefref.currentconst timeoutRef = useRef<number | null>(null);function Search() {
const inputRef = useRef<HTMLInputElement>(null);
return (
<>
<input ref={inputRef} />
<button onClick={() => inputRef.current?.focus()}>
Enfocar
</button>
</>
);
}Si el valor debe verse en pantalla, usa estado. Una ref puede cambiar sin que el usuario vea el cambio.
Salvo inicialización predecible, evita usar ref.current como dato reactivo dentro del render. React no rastrea esos cambios.
Una ref permite interactuar con APIs imperativas, pero no debería sustituir el flujo declarativo normal.
State representa información visual reactiva. Ref conserva información mutable que React no necesita renderizar.
useRef devuelve un objeto cuya identidad se conserva durante la vida de la instancia:
const ref = useRef(initialValue);render 1 → ref object ─┐
render 2 → same object ├→ ref.current mutable
render 3 → same object ┘Cambiar ref.current no solicita render porque React no utiliza ese valor para calcular automáticamente la interfaz.
const timeoutIdRef = useRef<number | null>(null);Conserva información necesaria entre eventos o effects, pero invisible para la UI.
const inputRef = useRef<HTMLInputElement>(null);
return <input ref={inputRef} />;React asigna el nodo durante commit y coloca null al desmontar.
¿debe persistir entre renders?
├─ no → variable local
└─ sí
¿debe cambiar la UI?
├─ sí → state
└─ no → refEjemplos:
function SearchField() {
const inputRef = useRef<HTMLInputElement>(null);
function handleClear() {
if (!inputRef.current) return;
inputRef.current.value = "";
inputRef.current.focus();
}
return (
<>
<input ref={inputRef} defaultValue="React" />
<button type="button" onClick={handleClear}>Limpiar</button>
</>
);
}Esta manipulación es coherente porque el input es no controlado. En un input controlado, limpia mediante state y usa la ref solo para focus.
function DelayedMessage() {
const timeoutRef = useRef<number | null>(null);
function schedule() {
if (timeoutRef.current !== null) {
window.clearTimeout(timeoutRef.current);
}
timeoutRef.current = window.setTimeout(() => {
// acción
}, 500);
}
useEffect(() => {
return () => {
if (timeoutRef.current !== null) {
window.clearTimeout(timeoutRef.current);
}
};
}, []);
}La ref permite que handlers y cleanup compartan el identificador actual.
Puedes actualizar una ref después del commit:
function usePrevious<T>(value: T) {
const previousRef = useRef<T>();
useEffect(() => {
previousRef.current = value;
}, [value]);
return previousRef.current;
}En el render actual devuelve lo guardado por el commit anterior. Documenta claramente esta semántica.
ref.current += 1; // impuro si ocurre en cada renderHace que el resultado dependa del número de ejecuciones, que puede variar en Strict Mode o trabajo descartado.
Existe una inicialización predecible aceptable cuando el resultado es idéntico y solo se realiza una vez:
const playerRef = useRef<VideoPlayer | null>(null);
if (playerRef.current === null) {
playerRef.current = new VideoPlayer();
}Debe ser pura respecto al render y no depender de efectos observables. Para recursos con lifecycle externo, un effect puede ser más apropiado.
Guardar “el último valor” en una ref puede ser válido para callbacks imperativos:
const latestCallbackRef = useRef(onMessage);
latestCallbackRef.current = onMessage;Pero no lo uses automáticamente para esconder dependencias de un effect. Si la sincronización debe reaccionar a un valor, ese valor es una dependencia. En React moderno, useEffectEvent expresa mejor ciertos casos de lógica no reactiva.
Refs son apropiadas para:
focus().scrollIntoView().Evita eliminar, reordenar o crear manualmente nodos que React administra. La estructura visible debe derivarse de state.
Una función ref recibe el nodo cuando se asigna y null cuando se retira:
function MeasureItem() {
const handleRef = useCallback((node: HTMLDivElement | null) => {
if (node) {
console.log(node.getBoundingClientRect());
}
}, []);
return <div ref={handleRef}>Contenido</div>;
}Strict Mode puede repetir setup y cleanup de ref callbacks en desarrollo; deben ser reversibles.
Un componente puede reenviar una ref al nodo o exponer un handle pequeño con useImperativeHandle. No expongas su DOM interno por defecto: aumenta acoplamiento y dificulta cambiar implementación.
No existe nodo DOM durante server rendering. ref.current es null hasta el commit cliente. No bases el HTML inicial en mediciones ni browser APIs leídas desde refs.
Cuando ref.current es null:
Cuando la UI no cambia tras modificar una ref, es el comportamiento esperado: usa state si debe renderizarse.
ref.current no actualiza la pantalla?current; la callback ejecuta setup y cleanup al recibir el nodo.useEffect explica cómo refs participan en sincronizaciones que necesitan setup y cleanup después del commit.