⌘ REFERENCIA · 50 elementos

Cheatsheet de SolidJS

La reactividad fina entera en un sitio: primitivos, control flow, stores, async y SolidStart. Busca por API o por lo que quieres hacer.

🧬 Primitivos 6

Signal: el getter es una funciónconst [x, setX] = createSignal(0)

Efecto: reacciona a sus depscreateEffect(() => …)

Derivación cacheadaconst full = createMemo(() => …)

Async como primitivoconst [data] = createResource(src, fetcher)

Setter con función updatersetX(v => v + 1)

Notificar siemprecreateSignal(v, { equals: false })

🔍 Control del tracking 6

Leer sin suscribirseuntrack(() => x())

Agrupar setters en una propagaciónbatch(() => { … })

Deps explícitas, opcional diferiron(x, (v) => …, { defer: true })

Scope reactivo manualcreateRoot(dispose => …)

Liberar al re-ejecutar o disponeronCleanup(() => …)

Capturar y restaurar el dueñogetOwner() · runWithOwner()

🧩 Componentes y props 5

Leer prop (¡NO destructurar!)props.value

Defaults reactivosmergeProps(defaults, props)

Separar y hacer spreadconst [local, rest] = splitProps(props, ["a"])

Resolver hijos una vezconst c = children(() => props.children)

Spread de props al DOM<div {...rest} />

🔀 Control flow 8

Condicional (no uses && crudo)<Show when={x()} fallback={…}>

Lista keyed por referencia<For each={items()}>{(it) => …}</For>

Lista por posición (it es signal)<Index each={items()}>{(it) => …}</Index>

Ramas exclusivas<Switch><Match when={…}>…</Match></Switch>

Componente en runtime<Dynamic component={comp()} />

Renderizar fuera del árbol<Portal>…</Portal>

Capturar errores<ErrorBoundary fallback={…}>

Esperar resources<Suspense fallback={…}>

📦 Stores 6

Proxy reactivo anidadoconst [s, setS] = createStore({…})

setStore por pathsetS("user", "name", "Ana")

Updater en pathsetS("count", c => c + 1)

Mutación estilo ImmersetS(produce(d => { d.list.push(x) }))

Fusionar datos externossetS(reconcile(nuevosDatos))

Objeto crudo no reactivounwrap(s)

🌳 Context y lifecycle 6

Crear contextoconst Ctx = createContext(default)

Proveer al subárbol<Ctx.Provider value={…}>

Consumir contextoconst v = useContext(Ctx)

Tras montar (DOM listo)onMount(() => …)

Ref al elementolet el; <div ref={el} />

Componente diferidoconst c = lazy(() => import("./X"))

🚀 SolidStart 7

Ruta por archivo, param [id]routes/blog/[id].tsx

Función solo de servidor (RPC)"use server"

Cargar datos cacheadoconst getUser = query(fn, "user")

Derivación async como signalconst user = createAsync(() => getUser())

Mutación de servidorconst submit = action(fn)

Estado de la mutaciónconst s = useSubmission(submit)

Link con estado activo<A href="/x">

🛠️ CLI y tooling 6

Crear proyecto Solid/SolidStartnpm init solid@latest

Servidor de desarrollo (Vite)npm run dev

Build de producciónnpm run build

Inspeccionar el grafo reactivosolid-devtools

Utilidades reactivas oficiales@solid-primitives/*

Config de SolidStart (preset, Vite)app.config.ts