useRef y acceso imperativo controlado

Aprende qué guarda useRef, por qué no renderiza y cómo usarlo para DOM, timers y valores persistentes.

useRef guarda un valor persistente entre renders sin provocar render cuando cambia.

Eso lo hace útil para dos cosas distintas:

  • referenciar nodos del DOM
  • guardar valores mutables que no forman parte de la UI

Ref al DOM

import { useRef } from 'react';

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

  function focusInput() {
    inputRef.current?.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus</button>
    </>
  );
}

Ref para valores internos

const timerRef = useRef(null);

Útil para:

  • IDs de setTimeout
  • instancias de librerías
  • valor previo
  • flags internos que no deben pintar nada

Qué no hacer

No uses useRef para esconder estado que sí debería renderizarse.

Si cambiar el valor debe actualizar la pantalla, eso es estado, no ref.

Regla mental

  • useState: dato de UI
  • useRef: dato persistente que no necesita render

En la siguiente lección usaremos varias de estas ideas para crear custom hooks con sentido real.