Refs al DOM: la variable, el callback y su timing

Tarde o temprano necesitas el nodo real: enfocar, medir, arrancar una librería. En Solid se captura con ref, y todo el nivel gira sobre un único matiz temporal que confunde a quien viene de React: el ref se resuelve cuando el elemento se crea, que es antes de que su padre lo inserte en el documento. Confundir “el nodo existe” con “el nodo está en la página” es la fuente número uno de mediciones que dan cero y focos que no funcionan. Dominar la línea temporal creación → inserción → montaje hace que las refs dejen de sorprenderte.

Dos formas de capturar, un mismo instante

La forma más común es una variable local. El compilador reconoce ref={identificador} y, en lugar de leer la variable, genera código que le asigna el nodo en cuanto lo crea:

import { onMount } from "solid-js";

function Editor() {
  let campo!: HTMLInputElement;      // ! promete a TS que se asignara antes de usarse
  onMount(() => campo.focus());       // aqui el nodo ya esta en el documento
  return <input ref={campo} placeholder="escribe" />;
}

Se usa let, no const, porque Solid va a escribir en la variable. La otra forma es un callback: recibe el elemento como argumento en el mismo instante de la creación. Es lo natural cuando quieres reaccionar al nacer el nodo o guardarlo en una estructura dinámica.

<For each={items()}>
  {(item) => <li ref={(el) => registrar(item.id, el)}>{item.nombre}</li>}
</For>

Lo esencial es que ambas formas se resuelven en el mismo momento: cuando el elemento se construye. La variable y el callback no son dos timings distintos; son dos maneras de recibir el mismo nodo en el mismo punto de la línea temporal.

El compilador convierte ref en una asignación

ref no es una prop que el elemento reciba en runtime, sino una instrucción para el compilador. Cuando Solid ve ref={campo}, no evalúa la expresión como valor: la trata como un destino de escritura. Lo que emite se parece conceptualmente a esto:

// Lo que escribes:
<input ref={campo} />;

// Lo que el compilador emite, en esencia:
const _el = document.createElement("input");
campo = _el;                 // asignacion inmediata, en la creacion
// ... mas tarde el padre hace parent.appendChild(_el)

Por eso la variable debe ser un let y por eso ref={campo} y ref={(el) => ...} son la misma operación vista de dos formas: en el primer caso el compilador asigna a tu variable; en el segundo, invoca tu función con el nodo. En ambos, la línea que captura corre entre crear el elemento e insertarlo.

Crear no es insertar

Aquí está el matiz que hay que grabar. En el instante en que el ref se resuelve, el nodo existe como objeto en memoria, pero su parentNode puede ser null y cualquier medida de layout —offsetWidth, getBoundingClientRect— devuelve cero, porque el elemento todavía no forma parte de la página.

flowchart LR
C[se crea el nodo en memoria] --> R[el ref o el callback se resuelven]
R --> I[el padre inserta el nodo en el documento]
I --> M[onMount corre con el DOM ya adjunto]
style R fill:#fab387,color:#11111b
style M fill:#a6e3a1,color:#11111b

Los cuatro instantes de la vida temprana de un nodo, en orden:

La regla operativa es tajante: usa el ref para capturar el nodo, y onMount para usarlo cuando ya está adjunto. Todo lo que dependa de estar en el documento —enfocar, medir, arrancar un ResizeObserver— va dentro de onMount, nunca junto a la asignación del ref.

function Lienzo() {
  let canvas!: HTMLCanvasElement;
  onMount(() => {
    const rect = canvas.getBoundingClientRect();   // ya insertado: mide de verdad
    const ctx = canvas.getContext("2d")!;
    ctx.fillRect(0, 0, rect.width, rect.height);
  });
  return <canvas ref={canvas} />;
}

Leer el ref en el cuerpo del componente es el error simétrico: el cuerpo corre antes de que el JSX se evalúe, así que ahí la variable aún vale undefined. El nodo no existe todavía en ninguna forma.

Cuando necesitas que el nodo sea reactivo —que otros cómputos reaccionen a que ya existe—, la variable let no basta, porque asignarla no notifica a nadie. El patrón entonces es pasar el setter de un signal directamente como ref:

import { createSignal, createEffect } from "solid-js";

function Panel() {
  const [caja, setCaja] = createSignal<HTMLDivElement>();
  createEffect(() => {
    const el = caja();
    if (!el) return;               // undefined hasta que el nodo se crea y asigna
    el.scrollIntoView();
  });
  return <div ref={setCaja}>...</div>;
}

Como setCaja es una función, encaja en la forma de callback: Solid lo invoca con el nodo al crearlo, el signal pasa de undefined al elemento, y el efecto que lo lee se re-ejecuta. Es la versión reactiva de la captura, útil cuando el “ya existe el nodo” debe propagarse por el grafo.

En resumen: usa la variable let cuando solo necesitas el nodo dentro de onMount, y usa el setter de signal cuando otros cómputos deben despertar en cuanto el nodo aparece. Ambos comparten el mismo instante de captura; se diferencian solo en si notifican al grafo o no.