useRef: acceso directo al DOM

A veces necesitas tocar el DOM

React se encarga de actualizar el DOM por ti. Pero hay situaciones donde necesitas acceso directo a un elemento del DOM:

• Enfocar un input automáticamente
• Medir el tamaño de un elemento
• Controlar un video (play, pause)
• Hacer scroll a un elemento específico
• Integrar con librerías externas que manipulan el DOM

Para estos casos existe useRef.

Cómo funciona useRef

Dos pasos:

1. Crear la ref con useRef(null) — crea una "caja" con .current = null
2. Conectar la ref al elemento con el atributo ref={inputRef}

Después del render, inputRef.current apunta al elemento <input> real del DOM. Puedes hacer lo que quieras con él.

Ejemplo: auto-focus al montar

Cuando el componente se monta, el useEffect enfoca el input automáticamente. El usuario puede empezar a escribir sin hacer click.

La diferencia clave con useState

useRef y useState guardan valores entre renders. La diferencia:

Otros usos de useRef

Guardar el valor anterior

Guardar IDs de timers

Cuándo NO usar refs

Si el dato afecta lo que se ve en pantalla → usa useState.

Regla simple: si se ve en pantalla, es estado. Si es una herramienta interna (timer ID, referencia al DOM), es ref.

Tu desafío 🚀

1. Crea una ref con useRef(null) y conéctala al input
2. Usa useEffect para enfocar el input automáticamente al cargar
3. Crea un botón "Limpiar y enfocar" que borre el texto y devuelva el foco al input

useRef es tu puerta de escape cuando necesitas ir más allá de lo declarativo. Úsalo con moderación — React funciona mejor cuando dejas que él maneje el DOM.