Los signals en SolidJS son la primera primitiva reactiva que necesitas dominar para crear datos dinámicos que cambian en el tiempo y se reflejan automáticamente en la interfaz. Si vienes de otros frameworks, esta pieza te va a parecer familiar pero con un giro: funciona fuera de cualquier componente.

¿Qué es un signal en SolidJS y cómo funciona?

Un signal es un paquete que contiene un valor más dos funciones: una para leerlo y otra para escribirlo. Esa separación entre lectura y escritura es lo que permite a Solid rastrear quién usa el dato y actualizar solo esa parte del DOM cuando cambia.

¿Qué es un signal en SolidJS? Es una primitiva reactiva que encapsula un valor dinámico. Te entrega una función getter para leerlo y un setter para modificarlo, y cualquier parte del DOM que lo use se actualiza sola.

La función que crea esta primitiva se llama createSignal y se importa directamente desde la librería de SolidJS [01:14]. Cuando la invocas, le pasas un valor inicial y recibes un arreglo con el getter y el setter.

jsx import { createSignal } from "solid-js";

const [count, setCount] = createSignal(0);

Fíjate en algo clave: count no es el valor, es una función. Por eso siempre la ejecutas con paréntesis cuando quieres leer el dato actual.

¿Por qué los signals no dependen de componentes?

Una característica que diferencia a Solid de frameworks como React es que su sistema reactivo vive en una librería independiente del sistema de renderizado [00:53]. Esto significa que puedes usar signals en cualquier lado.

• Dentro de componentes de UI.
• En scripts sueltos sin interfaz.
• Incluso en sistemas de backend o herramientas de scripting.

El algoritmo reactivo tiene su propio ciclo de vida y se encarga de propagar los cambios. Esa independencia es la que hace que la reactividad de Solid sea tan flexible.

¿Cómo crear un contador con createSignal paso a paso?

El ejemplo clásico para entender los signals es construir un contador dentro del componente App.jsx. Vamos a mezclar la primitiva con el sistema de renderizado granular de Solid para ver la magia en acción.

Primero declaras el signal dentro de la función del componente. Luego lo usas en el JSX usando llaves para insertar la expresión JavaScript:

jsx function App() { const [count, setCount] = createSignal(0);

return ( <> <h1>La cuenta {count()}</h1> <button onClick={() => setCount(count() + 1)}> {count()} </button> </> ); }

Cada vez que haces clic en el button, el event handler ejecuta setCount con el valor actual más uno. Y aquí viene lo interesante: Solid actualiza únicamente los nodos del DOM que leen count(), no vuelve a renderizar todo el componente.

¿Cómo se actualiza el valor de un signal? Llamas al setter que te devolvió createSignal y le pasas el nuevo valor, por ejemplo setCount(count() + 1). Solid detecta el cambio y refresca solo las partes del DOM que usan ese signal.

¿Dónde puedo usar el signal dentro del JSX?

Una vez creado, puedes invocar count() en cualquier parte del markup. En el ejemplo lo usamos dentro del h1 y también como label del botón [05:16]. El sistema de renderizado se encarga de mantener sincronizados todos esos puntos al mismo tiempo.

Si abres la consola del navegador y haces console.log(count()) antes y después de un setCount(1), verás primero el cero inicial y luego el uno actualizado. Eso confirma que la lectura siempre va por la función getter.

¿Por qué conviene declarar los signals dentro del componente?

Aunque el sistema reactivo no obliga a usar componentes, hay una razón práctica para declarar los signals dentro de la función del componente que los necesita: organización y legibilidad.

Cuando alguien lee tu App.jsx, entiende de un vistazo que ese componente:

• Inicializa un signal con un valor por defecto.
• Devuelve un DOM que consume ese signal.
• Encapsula la lógica de actualización en un mismo lugar.

Es un modelo mucho más fácil de mantener, sobre todo cuando el proyecto crece. Pero recuerda la diferencia conceptual: en React la reactividad está atada al ciclo del componente; en Solid es un sistema aparte que tú decides dónde colocar.

Conceptos clave que aparecen en esta clase

• Primitiva reactiva [00:11]: bloque básico que ofrece un framework para manejar datos que cambian. Solid tiene tres principales y los signals son la primera.
• createSignal [01:14]: función importada de solid-js que crea el paquete con valor inicial, getter y setter.
• Segregación de lectura y escritura [02:20]: separar count (leer) de setCount (escribir) permite a Solid rastrear dependencias con precisión.
• Renderizado granular [03:27]: en lugar de re-renderizar todo el componente, Solid actualiza solo los nodos del DOM que dependen del signal modificado.
• Event handler [04:11]: función asociada a un evento del DOM, en este caso onClick, que dispara el setCount cuando el usuario interactúa.

La próxima primitiva reactiva, combinada con los signals, abre la puerta a patrones bastante poderosos. ¿Ya tienes ideas de qué construirías con esto? Cuéntame en los comentarios.