React Academy · Lektion

Ein HOC in einen Custom Hook umwandeln

Wandeln Sie ein withAuth-HOC Schritt für Schritt in einen useAuth-Hook um.

Ein HOC in einen Custom Hook umwandeln ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

In dieser Lektion wandeln Sie Schritt für Schritt einen withAuth-HOC in einen useAuth-Custom-Hook um und sehen genau, warum die Hook-Version übersichtlicher und leichter zu testen ist.

Der withAuth-HOC (Ausgangspunkt)

Der HOC erhält eine Komponente, prüft, ob der Benutzer authentifiziert ist, und leitet ihn andernfalls zu /login weiter. Außerdem schleust er den Benutzer als Prop ein.

function withAuth(Component) {
  return function AuthGuard(props) {
    const { user, loading } = useAuthState();
    if (loading) return <Spinner />;
    if (!user) return <Navigate to="/login" />;
    return <Component {...props} user={user} />;
  };
}

const ProtectedPage = withAuth(MyPage);

Probleme mit dem HOC

Der HOC: (1) fügt in den DevTools einen Wrapper hinzu, (2) schleust das `user`-Prop implizit ein – die Komponente muss wissen, dass sie es erwartet, (3) lässt sich nur schwer testen, ohne den vollständigen HOC-Wrapper zu rendern, und (4) lässt sich nicht einfach mit anderen Hooks kombinieren.

Schritt 1: Logik in einen Hook auslagern

Verschieben Sie die gesamte Logik aus dem HOC in einen Custom Hook. Der Hook gibt den Authentifizierungszustand direkt zurück – ohne Wrapping und ohne Prop-Einschleusung.

function useAuth() {
  const { user, loading } = useAuthState();
  return { user, loading, isAuthenticated: !!user };
}

Schritt 2: Weiterleitungen im Hook behandeln

Verschieben Sie die Weiterleitungslogik in einen separaten Hook (z. B. useRequireAuth), der navigate intern aufruft und den Benutzer zurückgibt.

function useRequireAuth(redirectTo = '/login') {
  const { user, loading } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (!loading && !user) navigate(redirectTo);
  }, [user, loading, navigate, redirectTo]);

  return { user, loading };
}

Schritt 3: Komponente aktualisieren

Ersetzen Sie den HOC-Wrapper durch einen direkten Hook-Aufruf innerhalb der Komponente. Die Komponente ruft useRequireAuth explizit auf und behandelt den Ladezustand. Ihre Abhängigkeit ist nun sichtbar.

function MyPage() {
  const { user, loading } = useRequireAuth();
  if (loading) return <Spinner />;
  return <p>Hello, {user.name}</p>;
}

Vorteile im Vergleich

Die Hook-Version bietet: (1) keinen zusätzlichen Wrapper in den DevTools, (2) eine explizite Abhängigkeit – Sie sehen `useRequireAuth` in der Komponente, (3) Testbarkeit durch Mocking des Hooks und (4) Kombinierbarkeit mit anderen Hooks in derselben Komponente.

Die Hook-Version testen

Mappen Sie useRequireAuth in Ihrem Test, indem Sie den Export des Moduls ersetzen. Im Komponententest müssen Sie nur die Komponente rendern und die Ausgabe überprüfen – eine HOC-Einrichtung ist nicht erforderlich.

vi.mock('./useRequireAuth', () => ({
  useRequireAuth: () => ({ user: mockUser, loading: false })
}));

render(<MyPage />);
expect(screen.getByText('Hello, Alice')).toBeInTheDocument();

Wann Sie einen HOC beibehalten sollten

Behalten Sie den HOC bei, wenn Sie viele Komponenten deklarativ schützen müssen (z. B. in Route-Definitionen) und den Hook-Aufruf nicht zu jeder Komponente hinzufügen möchten. Sie können den HOC sogar AUF BASIS des Hooks erstellen.

function withAuth(Component) {
  return function (props) {
    const { user, loading } = useRequireAuth();
    if (loading) return <Spinner />;
    return <Component {...props} user={user} />;
  };
}

Das Beste aus beiden Welten

Die endgültige Architektur: ein useRequireAuth-Hook zur direkten Verwendung in Komponenten UND ein schlanker withAuth-HOC, der darauf aufbaut und deklarativen Routenschutz ermöglicht. Beide verwenden dieselbe Hook-Logik.

Kurzer Test

Was ist der wichtigste Vorteil, wenn Sie useRequireAuth innerhalb einer Komponente aufrufen, statt sie mit einem withAuth-HOC zu umschließen?

Zusammenfassung

Wandeln Sie HOCs in Hooks um, indem Sie die Logik in einen Custom Hook auslagern, Seiteneffekte (etwa Weiterleitungen) in den Hook verschieben und den Hook direkt in der Komponente aufrufen. Erstellen Sie einen schlanken HOC auf Basis des Hooks, wenn deklaratives Wrapping erforderlich ist.

Kurs abgeschlossen

Herzlichen Glückwunsch! Sie haben **React-Muster: Render Props & HOCs** abgeschlossen. Sie verstehen nun beide klassischen Muster, ihre jeweiligen Vor- und Nachteile sowie ihre Umwandlung in moderne Custom Hooks.

Häufig gestellte Fragen

Ist die Lektion „Ein HOC in einen Custom Hook umwandeln“ kostenlos?

Ja — der vollständige Text von „Ein HOC in einen Custom Hook umwandeln“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Ein HOC in einen Custom Hook umwandeln“?

Wandeln Sie ein withAuth-HOC Schritt für Schritt in einen useAuth-Hook um. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Ein HOC in einen Custom Hook umwandeln“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu React Academy