React ist omnipräsent — doch wer wirklich maximale Performance braucht, schaut 2026 auf SolidJS. Das Framework verzichtet komplett auf den Virtual DOM und aktualisiert das DOM direkt, reaktiv und granular. Claude Code versteht SolidJS-Patterns nativ und hilft dir, in Minuten blitzschnelle UIs zu bauen.
Warum SolidJS 2026 so relevant ist
- Konsistent schneller als React, Vue und Svelte in Benchmarks
- Kein Virtual DOM-Overhead — Updates direkt am echten DOM
- React-ähnliche JSX-Syntax — kaum Lernkurve für React-Devs
- SolidStart bringt Full-Stack SSR/SSG out of the box
- Claude Code unterstützt SolidJS-Patterns vollständig
createSignal: Reaktivität ohne Magie
Das Herzstück von SolidJS ist createSignal — ein reaktiver Primitive ähnlich wie useState in React, aber mit einem entscheidenden Unterschied: Signals verfolgen ihre Abhängigkeiten automatisch und lösen nur die betroffenen DOM-Updates aus.
function Counter() {
// [getter, setter] — getter ist eine Funktion!
const [count, setCount] = createSignal(0);
// createEffect läuft bei jeder Signal-Änderung
createEffect(() => {
console.log(`Aktueller Wert: ${count()}`);
});
return (
<div>
{/* count() aufrufen, nicht count direkt */}
<p>Zähler: {count()}</p>
<button onClick={() => setCount(c => c + 1)}>
Erhöhen
</button>
</div>
);
}
Der kritische Unterschied zu React: count ist eine Funktion, kein Wert. Wenn du count() aufrufst, registriert SolidJS automatisch die Abhängigkeit. Ändert sich das Signal, wird nur der betroffene DOM-Knoten aktualisiert — kein Re-Render der gesamten Komponente.
Kein Virtual DOM: Warum das schneller ist ⚡ Performance
React hält eine virtuelle Kopie des DOM im Speicher. Bei jedem State-Update vergleicht React den alten und neuen Virtual DOM (Diffing) und wendet dann die Unterschiede an. Das ist elegant — aber kostspielig.
SolidJS kompiliert JSX zu echten DOM-Operationen während des Build-Prozesses. Zur Laufzeit gibt es keinen Diffing-Algorithmus, keine Component-Instanzen, keine Hooks-Reihenfolge. Signals wissen direkt, welcher DOM-Knoten von ihnen abhängt.
| Aspekt | SolidJS | React |
|---|---|---|
| Update-Mechanismus | Direktes DOM-Update | Virtual DOM Diff |
| Re-Render | Nein — granulare Updates | Ja — Komponente + Kinder |
| Bundle-Größe (min+gz) | ~7 KB | ~45 KB |
| Komponenten-Ausführung | Einmalig (Setup) | Bei jedem Re-Render |
| JS Framework Benchmark | Top 3 durchgehend | Mittelfeld |
createEffect und createMemo
createEffect reagiert auf Signal-Änderungen — ideal für Seiteneffekte wie API-Calls, DOM-Manipulationen oder Logging. createMemo ist der Equivalent zu useMemo, berechnet abgeleitete Werte und cached das Ergebnis automatisch.
function PriceCalculator() {
const [price, setPrice] = createSignal(100);
const [quantity, setQuantity] = createSignal(1);
// Wird nur neu berechnet wenn price() oder quantity() sich ändern
const total = createMemo(() => price() * quantity());
const withTax = createMemo(() => (total() * 1.19).toFixed(2));
// Seiteneffekt: Tracking-Event bei Preisänderung
createEffect(() => {
analytics.track("price_view", { total: total() });
});
return (
<div>
<p>Gesamt: €{total()}</p>
<p>Mit MwSt: €{withTax()}</p>
</div>
);
}
Components vs. React: Der entscheidende Unterschied
In React wird eine Komponente bei jedem State-Update komplett neu ausgeführt. Hooks, Closures, alle Berechnungen — alles läuft erneut. SolidJS-Komponenten laufen hingegen nur einmal beim ersten Rendering. Danach übernehmen die reaktiven Primitives.
Was das in der Praxis bedeutet
- Keine stale Closures — Signals sind immer aktuell
- Kein useCallback / useMemo für Performance-Optimierungen nötig
- Keine Rules of Hooks — createEffect kann überall aufgerufen werden
- Lifecycle ohne useEffect-Cleanup-Chaos:
onMountundonCleanup
function WebSocketWidget() {
const [messages, setMessages] = createSignal<string[]>([]);
let ws: WebSocket;
// Läuft einmal nach dem ersten DOM-Mount
onMount(() => {
ws = new WebSocket("wss://api.example.com/live");
ws.onmessage = (e) => {
setMessages(m => [...m, e.data]);
};
});
// Automatisches Cleanup — kein return in useEffect nötig
onCleanup(() => ws?.close());
return <ul><For each={messages()}>{(msg) => <li>{msg}</li>}</For></ul>;
}
Stores: createStore für komplexen State 🗃 Store
Für verschachtelte State-Strukturen bietet SolidJS createStore — ähnlich wie Zustand oder Jotai, aber direkt in die Reaktivitäts-Engine eingebaut. Stores erlauben granulare Updates tief verschachtelter Objekte.
interface AppState {
user: { name: string; email: string; premium: boolean };
cart: { id: number; qty: number }[];
}
const [state, setState] = createStore<AppState>({
user: { name: "Anna", email: "anna@example.com", premium: false },
cart: [],
});
// Nur user.premium wird im DOM aktualisiert
setState("user", "premium", true);
// produce() für komplexe Mutations (Immer-Syntax)
setState(produce((s) => {
s.cart.push({ id: 42, qty: 2 });
}));
Das Besondere: setState mit Pfad-Syntax ("user", "premium") triggert nur Updates bei Komponenten, die explizit auf state.user.premium zugreifen. Perfekte Granularität ohne Boilerplate.
SolidStart: Full-Stack mit File-Based Routing
SolidStart ist das offizielle Meta-Framework — vergleichbar mit Next.js für React. Es bringt SSR, SSG, Streaming, API-Routes und File-Based Routing direkt mit.
import { useParams } from "@solidjs/router";
import { createResource } from "solid-js";
import { cache, action } from "@solidjs/router";
// Server-Funktion (läuft nur auf dem Server)
const getPost = cache(async (slug: string) => {
"use server";
return await db.posts.findBySlug(slug);
}, "post");
export default function BlogPost() {
const params = useParams();
const [post] = createResource(() => getPost(params.slug));
return (
<article>
<Show when={post()} fallback={<p>Lädt...</p>}>
<h1>{post()?.title}</h1>
<div innerHTML={post()?.content} />
</Show>
</article>
);
}
Claude Code + SolidStart: Typischer Workflow
Claude Code generiert auf Knopfdruck vollständige SolidStart-Routen inklusive Server Actions, Fehlerbehandlung und TypeScript-Typen. Ein Prompt wie "Erstelle eine CRUD-API-Route für Blogposts mit Supabase" liefert production-ready Code in Sekunden.
Wann SolidJS statt React wählen?
SolidJS ist die bessere Wahl wenn...
- Performance kritisch ist: Dashboards, Echtzeit-UIs, Gaming, datenintensive Apps
- Bundle-Größe zählt: Mobile-First, Core Web Vitals, Low-End Devices
- Reaktivität komplex wird: Viele abhängige berechnete Werte, globaler State
- kein Framework-Lock-in: Solid-Primitives funktionieren ohne JSX/Komponenten-Overhead
React bleibt sinnvoll wenn...
- Das Team rein React-erfahren ist und kein Migrations-Budget besteht
- Umfangreiches React-Ökosystem (Next.js-Features, spezifische Libraries) benötigt wird
- Bestehendes React-Projekt inkrementell erweitert wird
Claude Code Setup: SolidJS Projekt in 2 Minuten
npm create solid@latest mein-projekt
# Template: SolidStart, TypeScript, Tailwind
cd mein-projekt && npm install
npm run dev
# Claude Code starten und direkt loslegen:
claude
# > "Erstelle eine reaktive Datentabelle mit Sortierung und Paginierung"
Claude Code versteht SolidJS-Konventionen — createSignal vs. createStore, Show vs. ternary, For vs. Array.map. Die KI schlägt automatisch die idiomatische SolidJS-Lösung vor statt React-Muster zu portieren.
Mit Claude Code blitzschnelle UIs bauen
Starte deinen kostenlosen Trial und lass Claude Code deine ersten SolidJS-Komponenten generieren — von createSignal bis SolidStart Full-Stack in Minuten.
Kostenlos Trial starten →