useRef: DOM y valores mutables

¿Qué es una ref?

useRef crea un objeto { current: ... } que persiste entre renders y que puedes mutar libremente. Lo distintivo: cambiar ref.current NO provoca un re-render. Es lo contrario de useState.

const ref = useRef(valorInicial);
ref.current;        // lees el valor
ref.current = otro; // lo cambias (sin repintar)

Tiene dos usos principales.

1) Referenciar un nodo del DOM

Pasando una ref al atributo ref de un elemento, React mete el nodo real del DOM en ref.current. Así puedes hacer cosas imperativas como enfocar un input:

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

  return (
    <div>
      <input ref={inputRef} placeholder="Buscar…" />
      <button onClick={() => inputRef.current.focus()}>Enfocar</button>
    </div>
  );
}

Cuando el componente se monta, inputRef.current apunta al <input> real, y podemos llamar a .focus(), .scrollIntoView(), etc.

2) Guardar un valor mutable que NO repinta

A veces necesitas recordar un dato entre renders pero no quieres que cambiarlo repinte la interfaz: el id de un setInterval, el valor anterior de una prop, un contador interno... Eso va en una ref, no en el estado.

function Render() {
  const renders = useRef(0);
  renders.current++;            // cuenta renders SIN provocar otro render
  return <p>Renders: {renders.current}</p>;
}

Estado vs. ref

Regla práctica: si el dato se muestra y debe verse actualizado, va en estado. Si es un detalle interno que la UI no necesita mostrar al cambiar, va en una ref. ¿Quieres mostrar el valor de una ref en pantalla? Cópialo al estado en el momento adecuado (p. ej., al pulsar un botón).