Claude · Foto: Lachlan Hardy, CC BY 2.0
react-expert
Zuletzt aktualisiert:
Typ
Subagent
Lizenz
MIT
Anwendungsfeld
Claude Subagenten
React-Entwickler.
Voraussetzungen
- Claude Code oder ein kompatibles Subagenten-System
- Bestehende React-Codebase mit Hooks bzw. funktionalen Komponenten
Einordnung
Der Nutzen zeigt sich erst in einer gewachsenen React-Codebase mit echten Architektur- oder Performance-Fragen.
Komponenten-Architektur, Hooks, State-Management, Performance-Tuning in React.
Für wen: React-Entwickler.
Im Detail
Fokussiert auf React-Komponentenarchitektur, Hooks wie useState, useReducer und useEffect, die Context API sowie Performance-Optimierung mit React.memo und useCallback. Im Vergleich zu einem allgemeinen Frontend-Agenten liegt der Mehrwert in der React-spezifischen Tiefe: wann sich ein Custom Hook lohnt, wie man unnötige Re-Renders vermeidet oder den Component Lifecycle sauber handhabt. Besonders hilfreich bei Refactorings von Klassen- zu funktionalen Komponenten, bei komplexem State-Management oder wenn eine React-Anwendung spürbar langsam wird. Für allgemeinere Frontend-Fragen jenseits von React, etwa CSS oder Build-Tooling, ist der Frontend-Developer-Agent breiter aufgestellt, für System- statt Komponenten-Performance ergänzt der Performance-Engineer sinnvoll.
Schritt für Schritt
- Konkrete Komponente, Hook oder Performance-Problem aus der bestehenden React-Codebase vorlegen.
- Den Agenten gezielt für Architektur-, State-Management- oder Re-Render-Fragen einsetzen statt für Framework-Grundsatzentscheidungen.
- Vorgeschlagene Hooks-Patterns wie useCallback, useMemo oder Custom Hooks gegen die eigene Dependency-Array-Logik prüfen.
- Bei State-Management-Fragen die gewählte Lösung (Context, Redux, Zustand) explizit benennen, damit der Vorschlag dazu passt.
- Ergebnis in React.StrictMode testen, um Stale-Closure- oder Re-Render-Probleme sichtbar zu machen.
Beispiel aus der Praxis
Sie legen eine Komponente mit unnötigen Re-Renders vor; der Agent identifiziert ein falsches Dependency-Array in useEffect und schlägt React.memo bzw. useCallback zur Stabilisierung vor.
Praxis-Tipp
Zum Beispiel: „Refactoriere diese Klassenkomponente zu Hooks und optimiere unnötige Re-Renders mit React.memo.“
Stolperfallen
Für grundsätzliche Framework-Auswahl ist der Agent nicht gedacht – dafür eher frontend-developer konsultieren. Stale Closures in useEffect werden leicht übersehen, wenn Dependency-Arrays nicht sorgfältig geprüft werden.
Siehe auch
Lizenz & Quelle
- Lizenz: MIT
- Quelle: 0xfurai/claude-code-subagents
Häufige Fragen.
Worin unterscheidet er sich von frontend-developer?
frontend-developer arbeitet breiter über Frameworks und UI-Grundsätze hinweg, react-expert ist auf React-Interna fokussiert.
Für welche Aufgaben lohnt sich der Agent am meisten?
Für konkrete Architektur- oder Performance-Fragen in einer bereits bestehenden React-Codebase.
Hilft er bei der Wahl des State-Management-Tools?
Er kennt Context, Redux und Zustand, die Grundsatzentscheidung für die Codebase sollte aber schon getroffen sein.
Inhalt ansehen (react-expert.md)
Lade …
Erfahrungen & Kommentare.
Funktioniert der Subagent bei Ihnen? Tipps, Stolperfallen, Varianten — teilen Sie es mit der Community.
Lade Kommentare …
Passt dazu.
code-reviewer
Tiefgehendes Code-Review: Sicherheitslücken, Performance, Zuverlässigkeit, Konfigurations-Review, moderne Analyse-Tools.
debugger
Spezialist für Fehler, fehlschlagende Tests und unerwartetes Verhalten; arbeitet systematisch zur Ursache.
security-auditor
DevSecOps-Audit: Schwachstellenanalyse, Threat Modeling, OAuth2/OIDC, OWASP, Cloud-Security, Compliance.
