React & Next.js Experte

KI-Code-Review für React

diffray versteht React. Hooks-Regeln, Komponenten-Patterns, Performance-Optimierung und Barrierefreiheit — KI-gestütztes Review für moderne React-Anwendungen.

React18+
Next.js13+ App Router
Remix2.x
Gatsby5.x
Vite + React5.x

Entwickelt für React-Entwickler

KI-Agenten, die React-Patterns, Hooks und moderne Best Practices verstehen.

Hooks & State

Finden Sie React-Hooks-Verstöße, veraltete Closures und State-Management-Bugs.

  • useEffect-Abhängigkeiten
  • Bedingte Hooks
  • State-Updates in Schleifen

Performance

Identifizieren Sie unnötige Re-Renders, fehlende Memoization und Bundle-Bloat.

  • useMemo/useCallback
  • Render-Optimierung
  • Code-Splitting

Barrierefreiheit

Stellen Sie sicher, dass Komponenten mit korrektem ARIA und Keyboard-Support barrierefrei sind.

  • ARIA-Attribute
  • Tastatur-Navigation
  • Fokus-Management

Komponenten-Design

Validieren Sie Komponenten-Patterns, Props und Kompositions-Best-Practices.

  • Prop-Types
  • Komponenten-Komposition
  • Key-Prop-Nutzung

Häufige React-Probleme, die wir finden

Fehlende useEffect-Abhängigkeiten
Veraltete Daten, Endlos-Schleifen, Race-Conditions
Bugs-Agent validiert Abhängigkeits-Arrays
Unnötige Re-Renders
Langsames UI, verschwendete Ressourcen, schlechte UX
Performance-Agent findet fehlende Memoization
XSS via dangerouslySetInnerHTML
Sicherheitslücke, Datendiebstahl
Security-Agent markiert unsichere HTML-Injektion
Fehlende Accessibility-Labels
Unbrauchbar für Screenreader, rechtliches Risiko
Accessibility-Prüfungen für interaktive Elemente

Benutzerdefinierte Regeln für Ihren React-Stack

Setzen Sie die React-Patterns Ihres Teams durch. Fordern Sie spezifische Hook-Nutzung, Komponenten-Strukturen oder Accessibility-Standards.

  • useCallback für Event-Handler erzwingen
  • Error-Boundaries in Routes erfordern
  • Accessibility in Formularen validieren
  • Korrekte Loading-States prüfen
.diffray/rules/react.yaml
rules:
  - id: react_use_error_boundary
    agent: bugs
    title: Routes need error boundaries
    description: All route components should
      have error boundaries for resilience
    importance: 8
    match:
      file_glob:
        - 'app/**/page.tsx'
        - 'pages/**/*.tsx'
    checklist:
      - Verify ErrorBoundary wraps component
      - Check for error fallback UI
      - Ensure errors are logged
    tags:
      - react
      - reliability
      - next-js

React FAQ

Bauen Sie bessere React-Apps

Schließen Sie sich React-Teams an, die diffray für Experten-KI-Code-Review nutzen.

Hooks-Validierung
Performance-Prüfungen
Accessibility-Audit