Claude Code SolidJS: Fine-grained Reaktivität, Signals und Performance-First Frontend mit KI

React hat das Frontend-Ökosystem dominiert — aber es hat einen Preis: den Virtual DOM. Bei jedem State-Änderung diffet React den kompletten Komponentenbaum, vergleicht alten und neuen Zustand, und aktualisiert dann den echten DOM. Für die meisten Apps ist das schnell genug. Für anspruchsvolle UIs mit häufigen Updates — Live-Dashboards, Echtzeit-Daten, komplexe Formulare — wird es zum Flaschenhals.

SolidJS macht das anders. Es gibt keinen Virtual DOM. Stattdessen kompiliert SolidJS JSX direkt zu DOM-Operationen, und Updates passieren chirurgisch präzise: nur die Teile des DOM ändern sich, die tatsächlich von einem geänderten Signal abhängen. Dieser Artikel zeigt, wie SolidJS funktioniert — und wie Claude Code dabei hilft, die reaktiven Muster schnell und korrekt umzusetzen.

1. Was SolidJS grundlegend anders macht

In React ist eine Komponente eine Funktion, die bei jedem Re-Render komplett neu ausgeführt wird. Der Virtual DOM diffet dann alten und neuen Output. SolidJS trennt das: Komponenten-Funktionen laufen genau einmal beim Setup. Was sich danach ändert, sind Signals — reaktive Primitive, die der Laufzeit genau sagen, welche DOM-Knoten aktualisiert werden müssen.

Das Ergebnis ist eine Performance, die in Benchmarks regelmäßig näher an Vanilla-JavaScript liegt als an React oder Vue. Nicht weil SolidJS weniger Features hat, sondern weil es keine unnötige Arbeit macht — kein Diffing, keine Component-Rerenders, kein GC-Druck durch kurzlebige Virtual-DOM-Objekte.

2. createSignal: Die Basis der Reaktivität

Signals sind das Herzstück von SolidJS. Ein Signal ist ein reaktiver Wert — wer ihn liest, abonniert automatisch Updates. Wer ihn schreibt, benachrichtigt alle Abhängigen.

import { createSignal } from "solid-js";

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

  return (
    <div>
      <p>Zähler: {count()}</p>
      <button onClick={() => setCount(count() + 1)}>
        Erhöhen
      </button>
    </div>
  );
}

Drei Dinge fallen sofort auf: count ist eine Funktion (nicht ein Wert), die man mit count() aufruft. setCount aktualisiert das Signal. Und die Komponente selbst läuft nicht neu — nur der Text-Knoten mit {count()} wird im DOM aktualisiert, wenn sich der Wert ändert.

Claude Code hilft hier besonders beim Umstieg von React: der häufigste Fehler ist, count statt count() zu schreiben — was in React funktioniert (weil es dort eine Variable ist), in SolidJS aber die Reaktivität bricht. Claude Code erkennt dieses Muster zuverlässig und erklärt, warum der Getter-Aufruf notwendig ist.

claude "Ich steige von React auf SolidJS um. Wo verliere ich Reaktivität
durch falsche Signal-Nutzung in dieser Datei?"

3. createEffect und createMemo: Reaktive Berechnungen

createEffect ist der SolidJS-Äquivalent zu Reacts useEffect — aber mit einem entscheidenden Unterschied: es trackt automatisch alle Signals, die während der Ausführung gelesen werden. Keine Dependency-Arrays, kein manuelles Pflegen von Abhängigkeiten.

import { createSignal, createEffect, createMemo } from "solid-js";

function SearchBox() {
  const [query, setQuery] = createSignal("");
  const [results, setResults] = createSignal([]);

  // Läuft automatisch wenn query() sich ändert
  createEffect(async () => {
    if (query().length < 2) {
      setResults([]);
      return;
    }
    const data = await fetchSearch(query());
    setResults(data);
  });

  // Abgeleiteter Wert — wird gecacht und nur neu berechnet wenn nötig
  const resultCount = createMemo(() =>
    results().length === 0
      ? "Keine Ergebnisse"
      : `${results().length} Treffer`
  );

  return (
    <div>
      <input
        value={query()}
        onInput={(e) => setQuery(e.target.value)}
        placeholder="Suchen..."
      />
      <p>{resultCount()}</p>
      <ul>
        <For each={results()}>
          {(item) => <li>{item.title}</li>}
        </For>
      </ul>
    </div>
  );
}

createMemo ist eine gecachte Ableitung — ähnlich wie useMemo in React, aber ohne explizite Dependencies. SolidJS trackt automatisch, von welchen Signals der Memo-Wert abhängt, und berechnet ihn nur neu wenn sich diese ändern.

4. Stores und createStore: Komplexer Zustand

Für einfachen Zustand reichen Signals. Für verschachtelte Objekte — Formulare, Listen, komplexe App-Zustände — gibt es createStore. Stores erlauben fine-grained Updates auf einzelne Properties, ohne das gesamte Objekt zu ersetzen.

import { createStore } from "solid-js/store";

function ProfileForm() {
  const [profile, setProfile] = createStore({
    name: "",
    email: "",
    address: {
      street: "",
      city: "",
      zip: ""
    }
  });

  // Nur die verschachtelte Property aktualisieren
  const updateCity = (city) => {
    setProfile("address", "city", city);
  };

  return (
    <form>
      <input
        value={profile.name}
        onInput={(e) => setProfile("name", e.target.value)}
        placeholder="Name"
      />
      <input
        value={profile.address.city}
        onInput={(e) => updateCity(e.target.value)}
        placeholder="Stadt"
      />
    </form>
  );
}

Der entscheidende Unterschied zu React: setProfile("address", "city", city) aktualisiert nur den Stadt-Knoten im DOM. Kein Re-Render der gesamten Komponente, kein Diffing des gesamten Objekts. Das ist fine-grained Reaktivität in der Praxis.

Claude Code hilft hier besonders beim Pfad-Syntax von createStore, der sich von React-Patterns unterscheidet:

claude "Wie aktualisiere ich mit createStore eine verschachtelte
Array-Property, ohne das gesamte Array zu ersetzen? Zeig mir
das Muster für eine Todo-Liste."

5. JSX ohne Virtual DOM: Was das bedeutet

In SolidJS kompiliert JSX nicht zu React.createElement()-Aufrufen, sondern zu direkten DOM-Operationen. Der Compiler analysiert das Template statisch und weiß bereits zur Build-Zeit, welche Teile reaktiv sind und welche statisch.

// SolidJS JSX — was du schreibst:
function Greeting({ name }) {
  return <h1>Hallo, {name()}!</h1>;
}

// Was der Compiler daraus macht (vereinfacht):
function Greeting({ name }) {
  const _el = document.createElement("h1");
  const _text = document.createTextNode("");
  _el.appendChild(document.createTextNode("Hallo, "));
  _el.appendChild(_text);
  _el.appendChild(document.createTextNode("!"));

  // Reaktive Subscription: nur _text wird aktualisiert
  createEffect(() => {
    _text.data = name();
  });

  return _el;
}

Das ist der Grund, warum SolidJS kein Framework im klassischen Sinne ist — es ist ein Compiler, der reaktiven Code zu effizientem DOM-Code transformiert. Was im Browser läuft, hat minimalen Overhead.

6. Routing mit solid-router

SolidJS-Projekte nutzen solid-router für Client-Side-Navigation. Die API ist deklarativ und integriert sich nahtlos in das reaktive System:

import { Router, Route } from "@solidjs/router";
import { lazy } from "solid-js";

// Lazy-Loading von Routen
const Home = lazy(() => import("./pages/Home"));
const About = lazy(() => import("./pages/About"));
const BlogPost = lazy(() => import("./pages/BlogPost"));

function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/blog/:slug" component={BlogPost} />
    </Router>
  );
}

// In BlogPost: URL-Parameter lesen
import { useParams } from "@solidjs/router";

function BlogPost() {
  const params = useParams();
  return <h1>Artikel: {params.slug}</h1>;
}

Der lazy()-Import sorgt dafür, dass Routen-Komponenten erst geladen werden, wenn sie tatsächlich besucht werden — automatisches Code-Splitting ohne Konfiguration.

7. Ressourcen und Suspense: Async-Daten reaktiv

createResource ist SolidJS' Lösung für asynchrone Daten. Es integriert Promises direkt in das reaktive System und arbeitet nahtlos mit Suspense zusammen:

import { createResource, Suspense } from "solid-js";

async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) throw new Error("User nicht gefunden");
  return response.json();
}

function UserProfile({ userId }) {
  // userId() kann ein Signal sein — bei Änderung wird neu geladen
  const [user] = createResource(userId, fetchUser);

  return (
    <Suspense fallback={<p>Lade Profil...</p>}>
      <div>
        <h2>{user()?.name}</h2>
        <p>{user()?.email}</p>
      </div>
    </Suspense>
  );
}

Wenn userId ein Signal ist und sich ändert, löst createResource automatisch einen neuen Fetch aus. Suspense zeigt während des Ladens den Fallback — ohne manuelles Loading-State-Management.

claude "Ich habe eine createResource, die bei Fehler keinen
Retry-Mechanismus hat. Zeig mir, wie ich Retry-Logik mit
Backoff in SolidJS implementiere."

8. SolidJS vs. React: Der ehrliche Vergleich

SolidJS ist nicht React-Ersatz für jedes Projekt — aber es ist eine ernsthafte Alternative für bestimmte Anwendungsfälle. Hier der ehrliche Vergleich:

• Performance: SolidJS gewinnt bei häufigen Updates (Echtzeit, Animationen, große Listen). React ist für typische CRUD-Apps schnell genug.
• Ökosystem: React hat deutlich mehr Libraries, Tools und Community-Ressourcen. SolidJS wächst, ist aber kleiner.
• Lernkurve: SolidJS-Konzepte (Signals, fine-grained Reaktivität) sind anders, nicht schwerer. React-Entwickler müssen Annahmen ableiten.
• Bundle-Größe: SolidJS ist kleiner — die Runtime ist deutlich schlanker als React + ReactDOM.
• TypeScript: Beide haben erstklassige TypeScript-Unterstützung.

"SolidJS ist nicht ‘React aber schneller’. Es ist ein anderes mentales Modell: statt ‘was rendert diese Komponente’ denkst du ‘welche Teile des DOM abhängen von welchem Signal’."

Claude Code hilft beim Umstieg konkret: nicht nur beim Umschreiben von Komponenten, sondern beim Verstehen, wo React-Annahmen (Komponente rendert bei jedem State-Update neu) in SolidJS nicht stimmen und zu Bugs führen.

claude "Ich migriere diese React-Komponente zu SolidJS. Zeig mir
wo das mentale Modell sich ändert und was ich anpassen muss:
[Komponenten-Code einfügen]"

9. Wie Claude Code mit SolidJS zusammenarbeitet

SolidJS hat eine relativ kleine, aber präzise API. Der Wert von Claude Code liegt nicht darin, die Dokumentation zu ersetzen — sondern darin, reaktive Muster korrekt auf konkrete Anforderungen anzuwenden.

Reaktivitätsfehler finden

claude "Mein createEffect läuft nicht neu, obwohl sich das Signal
ändert. Zeig mir wo die Reaktivität bricht:" < Component.tsx

Store-Operationen generieren

claude "Generiere alle CRUD-Operationen für diesen createStore,
inklusive Immer-ähnlicher Patch-Updates für verschachtelte Objekte"

Performance-Analyse

claude "Welche Teile dieser SolidJS-Komponente erzeugen unnötige
Re-Berechnungen? Wie strukturiere ich die Signals um?"

Claude Code liest den Komponenten-Code, versteht das reaktive Abhängigkeits-Geflecht und gibt konkrete Empfehlungen — keine generischen Tipps, sondern Antworten auf den spezifischen Code.

Weitere Artikel die auf diesem Thema aufbauen:

• Claude Code Debugging — Bugs in Minuten statt Stunden finden, auch in SolidJS-Projekten
• Claude Code für Python-Projekte — Backend-APIs die mit SolidJS-Frontends zusammenarbeiten
• Claude Code Mastery Kurs — Frontend-Frameworks, Agents und produktive Workflows auf Deutsch