Eine Higher-Order Component (HOC) ist eine FUNKTION, die eine Komponente entgegennimmt und eine NEUE, erweiterte Komponente zurückgibt – ein Muster aus den Zeiten VOR Hooks (2015-2018), das heute seltener, aber immer noch in manchen Bibliotheken und Codebases zu finden ist. Sie SOLLTEN es erkennen können, auch wenn Custom Hooks heute meist die bessere Wahl sind.

Die Grundformel: eine Funktion, die eine Komponente zurückgibt

function withEtwas(WrappedComponent) {
  return function EnhancedComponent(props) {
    // zusätzliche Logik hier
    return <WrappedComponent {...props} />;
  };
}

Der Name-Konvention "with..." (wie connect() aus klassischem Redux, das SELBST ein HOC ist) signalisiert: "Diese Funktion reichert eine Komponente mit etwas an". Falls Ihnen das bereits bekannt vorkommt: das Muster "Funktion nimmt Komponente, gibt Komponente zurück" haben Sie schon bei memo() aus Kapitel 31 UND lazy() aus "React für Einsteiger" Kapitel 20 gesehen – beide sind technisch HOCs, die React selbst mitbringt.

Ein praktisches HOC bauen: withAuthGuard

Wir bauen ein HOC-Äquivalent zu ProtectedRoute aus "React für Einsteiger" Kapitel 19 – nicht um ProtectedRoute zu ersetzen (das bleibt die bessere Lösung für Routing-Schutz), sondern um das HOC-MUSTER an einem realistischen, verständlichen Beispiel zu zeigen:

import { Navigate } from 'react-router-dom';
import { useAuthStore } from '../store/authStore';

function withAuthGuard(WrappedComponent) {
  function AuthGuarded(props) {
    const user = useAuthStore((state) => state.user);

    if (!user) {
      return <Navigate to="/login" replace />;
    }

    return <WrappedComponent {...props} />;
  }

  // Für bessere DevTools-Anzeige und Fehlermeldungen -
  // ohne dies würde JEDE eingepackte Komponente in den DevTools
  // als generisches "AuthGuarded" erscheinen, egal welche Komponente es ist
  AuthGuarded.displayName = `withAuthGuard(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;

  return AuthGuarded;
}

export default withAuthGuard;

{{...props}} reicht ALLE eingehenden Props unverändert an die eingepackte Komponente durch – das HOC fügt VERHALTEN hinzu, ohne die Schnittstelle der ursprünglichen Komponente zu verändern. displayName ist ein Detail, das viele HOC-Tutorials auslassen, aber in der Praxis wichtig ist: ohne es zeigen React DevTools nur den generischen Wrapper-Namen, was Debugging erschwert.

AccountPage mit dem HOC einpacken (rein zu Demonstrationszwecken)

// Am Ende von src/pages/AccountPage.jsx, statt "export default AccountPage;":
import withAuthGuard from '../hocs/withAuthGuard';

export default withAuthGuard(AccountPage);

Warum HOCs aus der Mode gekommen sind

• Wrapper Hell: Mehrere HOCs kombiniert (withAuthGuard(withLogging(withTheme(Component)))) erzeugen tief verschachtelte Komponentenbäume, die in den DevTools schwer zu lesen sind.
• Prop-Namenskollisionen: Zwei HOCs, die beide eine Prop namens data injizieren, überschreiben sich gegenseitig ohne Warnung.
• Unklare Herkunft von Props: Beim Lesen einer eingepackten Komponente ist nicht sofort ersichtlich, WELCHE Props von "außen" kommen und welche das HOC injiziert hat.

Der moderne Ersatz: Custom Hooks

Fast alles, wofür man früher ein HOC gebaut hätte, lässt sich heute eleganter mit einem Custom Hook lösen (siehe "React für Einsteiger" Kapitel 12) – KEINE Verschachtelung, KEINE Prop-Kollisionen, die Komponente bleibt eine EINZIGE Funktion:

// Als Custom Hook statt HOC:
function useAuthGuard() {
  const user = useAuthStore((state) => state.user);
  return user;
}

// Verwendung direkt in der Komponente:
function AccountPage() {
  const user = useAuthGuard();
  if (!user) return <Navigate to="/login" replace />;
  // ... Rest der Komponente
}