Derivación en cascada: el grafo y su propagación

Las derivaciones rara vez viven solas. El total de un carrito deriva de las líneas visibles, que a su vez derivan de las líneas y el filtro; una etiqueta de resumen deriva del total y del recuento. En cuanto un memo depende de otro memo, las derivaciones dejan de ser puntos aislados y se organizan en un grafo dirigido acíclico: las señales fuente en las raíces, los memos en los nodos intermedios, y los efectos y la UI en las hojas. Propagar un cambio de una raíz hasta las hojas parece trivial, pero esconde dos problemas que definen la calidad de un sistema reactivo: el glitch, donde un nodo se recalcula con entradas incoherentes o más veces de las debidas, y el sobrecoste, donde se recomputan ramas enteras que en realidad no cambiaron. La reactividad de grano fino de 2026 existe, en buena medida, para resolver ambos.

Memos sobre memos: el grafo de derivación

Cuando declaras un memo que lee otros memos, estás dibujando aristas en un grafo sin saberlo. Cada derivación es un nodo; cada lectura de otra señal o memo dentro de su cuerpo es una arista dirigida desde la dependencia hacia el dependiente. El resultado es un grafo dirigido y acíclico —un ciclo significaría que un valor depende de sí mismo, y los sistemas reactivos lo prohíben o lo detectan como error—, con las fuentes mutables en las raíces y la UI en las hojas. La reactividad de grano fino de Solid, de las señales del TC39, de Angular, de Vue y de Preact no es más que la construcción y el mantenimiento automáticos de este grafo: tú escribes derivaciones, y el runtime descubre las aristas rastreando qué se lee durante cada evaluación.

const items = createSignal([]);                 // raiz: estado fuente
const filtro = createSignal("activos");          // raiz: estado fuente
const visibles = createMemo(() => items().filter(coincide(filtro())));       // nodo 1
const total = createMemo(() => visibles().reduce((s, i) => s + i.precio, 0)); // nodo 2 sobre el 1
const etiqueta = createMemo(() => `${visibles().length} por ${moneda(total())}`); // nodo 3 sobre 1 y 2

El mismo grafo se construye en el mundo de Redux por composición de selectores: un createSelector puede tomar como selector de entrada a otro selector memoizado, encadenando derivaciones en las que cada eslabón cachea su parte. La diferencia es de grano y de automatismo —reselect compone a mano lo que las señales tejen solas—, pero la estructura es idéntica: un grafo por el que un cambio en la raíz debe propagarse hasta donde importe, y solo hasta donde importe.

// Redux: composicion de selectores memoizados es tambien un grafo de derivacion
const selectVisibles = createSelector([selectItems, selectFiltro], filtrar);
const selectTotal = createSelector([selectVisibles], sumarPrecios); // memo sobre memo

El glitch y el problema del diamante

El grafo tiene una topología peligrosa: el diamante. Una raíz a alimenta a dos memos b y c, y un cuarto memo d depende de ambos. Cuando a cambia, una propagación ingenua que empuje el cambio en cuanto lo ve puede recalcular d la primera vez que b se actualiza —cuando c todavía refleja el valor viejo de a— y luego otra vez cuando c se actualiza. Ese primer cálculo de d mezcla un b nuevo con un c viejo: es un estado incoherente, transitorio y observable, que se conoce como glitch. Y aunque no se llegara a observar, recalcular d dos veces por un solo cambio de a es trabajo desperdiciado.

// Diamante: a alimenta a b y a c; d se reune y depende de ambos
const a = signal(1);
const b = computed(() => a.value + 1);        // rama izquierda
const c = computed(() => a.value * 2);        // rama derecha
const d = computed(() => b.value + c.value);  // debe evaluarse UNA vez, con b y c coherentes

flowchart TD
A[senal fuente a] --> B[memo b rama izquierda]
A --> C[memo c rama derecha]
B --> D[memo d se reune aqui]
C --> D
style A fill:#89b4fa,color:#11111b
style D fill:#a6e3a1,color:#11111b

Propagación eficiente: pull perezoso y corte por igualdad

La solución que comparte el ecosistema moderno es una propagación en dos fases que evita a la vez el glitch y el recálculo múltiple. La primera fase es un empuje ligero: cuando una raíz cambia, no recalcula nada, solo recorre el grafo marcando a sus descendientes como sucios o posiblemente sucios, coloreándolos sin ejecutar sus cuerpos. La segunda fase es un pull perezoso: cuando alguien lee de verdad un nodo —un efecto, la UI—, el runtime asciende por sus dependencias y recalcula, en orden topológico, solo los nodos realmente sucios, garantizando que cuando le toca a d tanto b como c ya están al día. Así cada nodo se evalúa como mucho una vez por actualización y siempre con entradas coherentes, y los nodos que nadie observa no se calculan en absoluto.

Sobre esa base actúa la palanca que hace baratas las cascadas largas: el corte por igualdad. Cuando un memo se recalcula y su nuevo valor resulta igual al anterior —según Object.is o una función de igualdad que tú provees—, el runtime no marca como sucios a sus consumidores: la propagación muere ahí. Esto significa que un cambio en una raíz no tiene por qué llegar hasta las hojas; si un memo intermedio absorbe el cambio y produce el mismo resultado, todo el subgrafo que cuelga de él se ahorra el recálculo. Solid lo expone con la opción equals de createMemo, Angular y Vue lo aplican en sus computed, y las señales del TC39 y de Preact lo integran en su algoritmo de versiones. Diseñar buenas funciones de igualdad en los nodos intermedios es, por tanto, una herramienta de rendimiento tan potente como la memoización misma.

Push o pull: cómo propaga cada ecosistema

Los sistemas reactivos se reparten en dos filosofías de propagación, y conocerlas explica el comportamiento de cada librería. En la propagación push, un cambio en una raíz empuja notificaciones hacia adelante y actualiza a los dependientes de inmediato; es ansiosa y de baja latencia, pero propensa a glitches y a recomputar nodos que nadie observa. En la propagación pull, nada se calcula hasta que alguien lee un valor, momento en que el sistema tira de las dependencias hacia atrás; es perezosa y evita todo trabajo no observado, pero necesita saber qué está sucio para no recalcular de más.

El ecosistema de 2026 converge en un híbrido push-pull: una fase push ligera que solo marca el subgrafo como sucio, y una fase pull que recalcula perezosamente al leer, combinando la coherencia de la primera con la economía de la segunda. Cada framework lo implementa con su propia contabilidad de versiones o de coloreado, pero la semántica observable es idéntica: sin glitches y sin recálculo redundante.

Un matiz que sorprende: el grafo no es estático. Como las dependencias se descubren ejecutando el cuerpo del memo, una rama condicional puede cambiar qué se lee y, por tanto, las aristas del grafo de una evaluación a otra. Un memo que lee a cuando una bandera está activa y b cuando no, deja de depender de b en cuanto la bandera cambia, y el sistema reajusta las suscripciones solo. Esta dependencia dinámica es lo que hace tan precisa a la reactividad de grano fino: nunca te suscribes a más de lo que de verdad lees en cada evaluación.

// Dependencia dinamica: el grafo cambia segun que rama se ejecute
const vista = createMemo(() => (modoDetalle() ? detalle() : resumen()));
// Cuando modoDetalle es falso, este memo ni siquiera depende de detalle

Ese ajuste automático de suscripciones tiene un coste que conviene no disparar sin querer. Cuando cambias varias raíces en sucesión, cada escritura puede iniciar su propia pasada de propagación, de modo que un memo compartido aguas abajo se recalcula una vez por cada raíz que tocaste, aunque el resultado final sea el mismo. El batching agrupa esas escrituras en una sola transacción para que el grafo se recalcule una única vez y de forma coherente.

// Batching: varias escrituras se agrupan en una sola propagacion coherente
batch(() => {
  primero.set(10);
  segundo.set(20);
}); // un memo que depende de ambos se recalcula una vez, no dos veces

En las hojas del grafo viven los efectos, los únicos nodos que no derivan un valor sino que provocan un efecto secundario —pintar, escribir en el DOM, lanzar una petición— cuando sus dependencias cambian. A diferencia de los memos, los efectos son ansiosos: se reejecutan en cuanto la propagación termina, y son el punto donde el grafo puro de derivación se conecta con el mundo exterior. Colocar la lógica de derivación en memos y reservar los efectos para lo verdaderamente externo mantiene el grafo limpio y su propagación predecible.

// Un efecto es una hoja ansiosa del grafo: reacciona, no deriva
createEffect(() => { document.title = `${visibles().length} elementos`; });