El índice reactivo en For y el valor reactivo en Index

For e Index reciben ambos un callback (item, index), pero lo que entregan está cruzado. En For, el item es un valor estático y el index un accessor reactivo. En Index, el item es un accessor reactivo y el index un número estático. Exactamente al revés. Esa simetría no es un capricho de la API: es la consecuencia lógica de sobre qué clavea cada componente. Lo reactivo es siempre lo que puede cambiar mientras la fila sigue siendo la misma, y eso es distinto según claves por referencia o por posición.

La dualidad exacta

Parte del principio único: lo reactivo es lo que varía mientras la fila permanece. En For, la fila está atada a una referencia de objeto; esa referencia no cambia en toda la vida de la fila —si cambiara, sería otra fila—, así que el item puede ser estático. Lo que sí puede cambiar sin destruir la fila es su posición, cuando la lista se reordena; por eso el index es un accessor. En Index ocurre lo simétrico: la fila está atada a una posición fija, así que el index es un número estático, y lo que cambia bajo esa posición es el valor, de ahí que el item sea un accessor.

// For: valor estatico, indice reactivo
<For each={items()}>
  {(item, indice) => <li>{indice()}: {item.nombre}</li>}
</For>

// Index: valor reactivo, indice estatico
<Index each={items()}>
  {(item, indice) => <li>{indice}: {item().nombre}</li>}
</Index>

flowchart TD
F[For clavea por referencia] --> FV[valor estatico se lee item]
F --> FI[indice reactivo se llama indice]
X[Index clavea por posicion] --> XV[valor reactivo se llama item]
X --> XI[indice estatico numero fijo]
FI --> RE[siempre es reactivo lo que puede variar]
XV --> RE
style FI fill:#89b4fa,color:#11111b
style XV fill:#89b4fa,color:#11111b
style RE fill:#cba6f7,color:#11111b

Memoriza la regla y olvida la tabla: en cada componente, lo que se llama con paréntesis es lo variable, y lo que se lee sin paréntesis es el invariante. For invariante en el objeto, variable en la posición; Index invariante en la posición, variable en el valor.

El índice-signal de For en la práctica

Que el índice de For sea reactivo no es un detalle académico: es lo que permite que una numeración, un rayado cebra o una insignia de “primero” sigan siendo correctos tras un reordenamiento sin recrear filas. Cuando mueves un objeto, su nodo se reubica y su index() se recomputa solo; las clases y los números que dependen de él se actualizan de grano fino.

<For each={jugadores()}>
  {(jugador, posicion) => (
    <li classList={{ lider: posicion() === 0 }}>
      #{posicion() + 1} — {jugador.nombre}
    </li>
  )}
</For>

Reordena la lista y la clase lider salta a la nueva primera fila, y el número #n de cada fila se recalcula, todo sin desmontar ni un solo li. El estado local de cada fila permanece, porque el nodo solo se movió; únicamente el binding que lee posicion() reacciona.

El valor-signal de Index en la práctica

En Index el accessor es el item, y ese es justo el mecanismo que hace de Index la herramienta de los campos editables. El nodo del input se ancla a la posición; cuando el dato de esa posición cambia —lo escribas tú o llegue del servidor—, fluye por item() y solo el binding del value reacciona, sin tocar el elemento. El foco, el cursor y la selección se quedan donde el usuario los dejó.

<Index each={campos()}>
  {(campo, i) => (
    <input
      value={campo().valor}
      onInput={(e) => actualizar(i, e.currentTarget.value)}
    />
  )}
</Index>

Observa la división de trabajo: campo() es reactivo y alimenta el value; i es un número estático perfecto para localizar qué posición actualizar en el manejador, porque para ese input la posición nunca cambia. Con For esta misma escena se rompería —al cambiar el valor cambiaría la clave del primitivo y el input se remontaría—, y con Index encaja sin fricción.

Combinar los dos signals en una fila

La potencia real aparece cuando una fila deriva de su miembro reactivo. En For, combinas el índice-signal con el objeto estático para producir vistas que reaccionan solo a lo que cambia: el id no reacciona nunca, la posición sí.

<For each={pistas()}>
  {(pista, i) => {
    const par = () => i() % 2 === 0;          // deriva del indice-signal
    return (
      <li classList={{ par: par(), impar: !par() }}>
        {i() + 1}. {pista.titulo}
      </li>
    );
  }}
</For>

La derivación par se recomputa solo cuando i() cambia, es decir, cuando esa fila se reordena; el título, estático, no participa. En Index la derivación es simétrica: parte del valor-signal, y el índice es una constante que puedes capturar sin miedo en un closure porque no cambiará para esa fila.

<Index each={temperaturas()}>
  {(t, i) => {
    const alerta = () => t() > 38;            // deriva del valor-signal
    return <li classList={{ alerta: alerta() }}>sensor {i}: {t()}</li>;
  }}
</Index>

Aquí i entra en el closure como número literal —seguro, porque la posición es el invariante— mientras t() es la fuente reactiva que dispara alerta. Este patrón de derivar con una función que lee el miembro reactivo es el idioma que sustituye a useMemo: no declaras dependencias, la derivación se suscribe sola a lo que lee, sea i() o t(), y se recomputa solo cuando eso cambia. La precisión es automática.

Cuando la derivación es cara, promuévela a un createMemo explícito; hereda la misma suscripción fina al miembro reactivo:

<For each={filas()}>
  {(fila, i) => {
    const etiqueta = createMemo(() => `${i() + 1} de ${total()}`);
    return <li>{etiqueta()}</li>;
  }}
</For>