wandres.dev
ONTOLOGÍA · El mapa de Solid

La ontología de SolidJS

El mapa mental de Solid antes de recorrerlo: la reactividad de grano fino, el grafo, los componentes que corren una vez, stores, async first-class y SolidStart.

⏱ 11 min

SolidJS parte de una herejía respecto a React: no hay virtual DOM, no hay re-render, y el componente se ejecuta una sola vez. Lo que cambia con el tiempo no son los componentes, sino unos valores reactivos —los signals— que actualizan quirúrgicamente solo el trozo de DOM que depende de ellos. Este mapa te da la visión aérea antes de bajar al detalle.

🎯 Al terminar esta lección sabrás
  • Ver el mapa mental completo de Solid.
  • Entender la reactividad de grano fino y por qué no hay VDOM.
  • Situar los primitivos, el control flow, los stores, el async y SolidStart.
  • Empezar con el modelo mental correcto (que NO es el de React).

El territorio, de un vistazo

mindmap
root((SolidJS))
  Primitivos
    createSignal
    createEffect
    createMemo
    createResource
  Reactividad
    Grafo fino
    Ownership y cleanup
    untrack batch on
  Componentes
    Corren una vez
    Props reactivas
    children
  Control flow
    Show y Switch
    For e Index
    Dynamic y Portal
  Estado
    createStore
    produce y reconcile
    Context
  Async
    Suspense
    Transitions
    ErrorBoundary
  SolidStart
    File routing
    Server functions
    Actions y data
  Plataforma
    Compilador JSX
    Solid 2.0

Las ideas clave

🧬

Grano fino, sin VDOM

Solid no re-renderiza componentes ni compara árboles. Cada signal sabe exactamente qué efectos y qué nodos del DOM dependen de él, y solo actualiza esos. La reactividad es el mecanismo, no un truco de rendimiento.

1️⃣

El componente corre una vez

El cuerpo de un componente Solid se ejecuta una sola vez, al crearse. No hay ciclo de render. La “vida” ocurre en el JSX y en los efectos, que se re-ejecutan por su cuenta cuando cambian sus dependencias.

⚡

Async first-class

createResource, Suspense y Transitions hacen que lo asíncrono sea un ciudadano de primera: estados de carga, coordinación y concurrencia sin librerías externas. Solid 2.0 lo lleva aún más lejos.

🚀

Del signal al fullstack

SolidStart extiende los mismos primitivos al servidor: file routing, SSR en streaming, server functions type-safe y actions. La misma mentalidad reactiva, de la UI al backend.

Por qué importa

⚡
La reactividad ES la arquitectura

En React el modelo mental es “todo se re-renderiza; optimiza para que no”. En Solid es al revés: nada se re-renderiza jamás; tú construyes un grafo de dependencias y el sistema propaga cambios por él. Esta inversión tiene consecuencias enormes. No necesitas useMemo, useCallback ni listas de dependencias: el tracking es automático y exacto. No pagas el coste de un virtual DOM ni de reconciliar árboles. Y el modelo compone de forma natural, porque un signal es solo una función que puedes pasar, derivar y observar. La contrapartida es que hay que des-aprender los reflejos de React —sobre todo el de destructurar props y el de pensar en “renders”—. Quien interioriza que el componente corre una vez y que la reactividad vive en el grafo, encuentra en Solid uno de los modelos más coherentes y rápidos del frontend moderno.

El camino

  • Niveles 1–9 · Fundamentos — por qué Solid, JSX, signals, efectos, memos, el modelo de ejecución, props, children, eventos.
  • Niveles 10–18 · Reactividad a fondo — el grafo, ownership, untrack/batch/on, createRoot, y todo el control flow.
  • Niveles 19–25 · Estado — createStore, produce, reconcile, estado global, context, createMutable e interop.
  • Niveles 26–31 · Async — createResource, Suspense, transitions, ErrorBoundary y patrones de datos.
  • Niveles 32–38 · SolidStart — routing, modos de render, server functions, actions, data loading, auth.
  • Niveles 39–41 · Maestría — el compilador, rendimiento y Solid 2.0, y el nivel Dios de síntesis.
⚔️ Sitúate en el mapa
  1. Estudia el mapa mental y localiza qué te suena de otros frameworks y qué no.
  2. Si vienes de React: anota mentalmente “el componente corre una vez” y “no destructurar props”. Serán tus dos mayores tropiezos.
  3. Piensa en un componente que hayas escrito con useState/useEffect: ¿cuánto de su complejidad era gestionar re-renders? Eso es lo que Solid elimina.
  4. Comprométete con la mentalidad del grafo: signals que fluyen, no componentes que se repintan.