HOC'yi Özel Hook'a Yeniden Düzenleme

Hoş Geldiniz

withAuth HOC'si (Başlangıç Noktası)

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);

HOC ile İlgili Sorunlar

1. Adım: Mantığı Bir Kancaya Çıkarma

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

2. Adım: Yönlendirmeleri Kancada Yönetme

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

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

  return { user, loading };
}

3. Adım: Bileşeni Güncelleme

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

Karşılaştırmalı Avantajlar

Kanca Sürümünü Sınama

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

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

HOC Ne Zaman Korunmalı

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

İki Yaklaşımın da En İyisi

Hızlı Kontrol

Özet

Kurs Tamamlandı