La reactividad es la base que permite que frameworks como Solid actualicen automáticamente partes de tu aplicación cuando cambian sus dependencias. Aquí vas a entender, sin teoría innecesaria, cómo funciona ese sistema de expresiones vinculadas y por qué importa cuando construyes interfaces dinámicas.

¿Qué es un sistema reactivo en términos prácticos?

Un sistema reactivo es, en esencia, un conjunto de expresiones que se conocen entre sí y se actualizan solas cuando alguna de sus dependencias cambia. Nada más, nada menos.

Piensa en una expresión matemática simple: A = B + C. Si asignas B = 10 y C = 5, entonces A = 15 por referencia directa. Y aquí viene lo interesante: si cambias B a 15, el valor de A se recalcula automáticamente a 20 sin que tengas que pedirlo.

¿Qué es la reactividad? Es un sistema donde las expresiones están vinculadas y se actualizan a sí mismas cuando una de sus dependencias cambia, propagando los cambios a todo lo que dependa de ellas.

¿Cómo se propagan los cambios entre dependencias?

Cuando complicas el sistema con una variable adicional, la propagación se vuelve más visible. Imagina estas expresiones:

• A = B + C.
• D = A + E.

Si defines B = 0, C = 5 y E = 10, entonces A = 5 y D = 15. Ahora cambia B de 0 a 5: A pasa a valer 10, y como D depende de A, también se recalcula a 20.

Ese efecto en cadena es justo lo que un framework reactivo necesita resolver: disparar las actualizaciones en cada lugar donde una variable reactiva esté siendo usada.

¿Cómo aplica Solid este concepto con signals?

Solid traduce esa idea de expresiones vinculadas a una primitiva concreta: el signal. Y lo hace con una decisión de diseño clave que ya viste en el primer módulo: la segregación de lectura y escritura.

Un signal te entrega dos cosas:

• Un getter para leer el valor actual.
• Un setter para modificar ese valor.

Si tienes un counts que arranca en 0 y un botón que en su evento click dispara el setter, todos los lugares del DOM donde estés leyendo counts se actualizan automáticamente. No tocas el HTML manualmente.

¿Qué es un signal en Solid? Es una primitiva reactiva que separa lectura y escritura, permitiendo que cualquier parte de la aplicación que use el valor se actualice sola cuando este cambia.

¿Qué pasa con los signals derivados?

Los signals derivados son variables reactivas que dependen de otro signal. Por ejemplo, un doubleCounts definido como counts * 2.

Cuando counts vale 0, doubleCounts vale 0. Cuando actualizas counts a 5, dos cosas ocurren al mismo tiempo:

• El valor interno de doubleCounts se recalcula a 10.
• Cada nodo del DOM que renderiza doubleCounts se actualiza visualmente.

Esto es exactamente la misma lógica de la expresión D = A + E del ejemplo matemático, pero llevada al renderizado de tu interfaz.

¿Por qué Solid destaca al manejar la reactividad?

Lo que diferencia a Solid no es la idea en sí, sino su algoritmo. Solid detecta con precisión qué partes dependen de qué signal y solo ejecuta las actualizaciones donde realmente se necesitan, sin volver a renderizar componentes completos.

Esa precisión es la razón por la que Solid expone varias primitivas que te dejan controlar cómo y dónde ocurren las actualizaciones. No es magia: es un sistema de expresiones vinculadas con un motor afinado para propagar cambios de forma quirúrgica.

¿Por qué Solid es más eficiente que otros frameworks reactivos? Porque su algoritmo identifica exactamente qué dependencias cambiaron y actualiza solo esos puntos del DOM, sin re-renderizar componentes enteros.

¿Qué viene después de entender la reactividad?

Con esta base sobre expresiones, dependencias y propagación, tienes lo necesario para dar el siguiente paso: construir tu propia librería reactiva, una especie de mini Solid, partiendo desde cero. Ahí vas a ver cómo se conectan los getters, los setters y la detección de dependencias en código real.

¿Qué parte de la reactividad te genera más dudas hasta aquí? Cuéntame en los comentarios antes de pasar a la siguiente clase.