React Academy · Lezione

Refactoring di un HOC in un Custom Hook

Converti passo dopo passo un HOC withAuth in un hook useAuth.

Lezione 4 di 413 passaggi

Refactoring di un HOC in un Custom Hook è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuto

In questa lezione eseguirà passo dopo passo il refactoring di un HOC withAuth trasformandolo in un hook personalizzato useAuth, comprendendo esattamente perché la versione con hook è più pulita e facile da testare.

L'HOC withAuth (punto di partenza)

L'HOC riceve un componente, verifica se l'utente è autenticato e, in caso contrario, lo reindirizza a /login. Inietta l'utente come prop.

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

Problemi dell'HOC

L'HOC: (1) aggiunge un wrapper in DevTools, (2) inietta implicitamente la prop `user`: il componente deve sapere di doverla ricevere, (3) è difficile da testare senza eseguire il rendering dell'intero wrapper HOC, (4) non è facilmente componibile con altri hook.

Passaggio 1: estrarre la logica in un hook

Sposti tutta la logica dell'HOC in un hook personalizzato. L'hook restituisce direttamente lo stato di autenticazione: nessun wrapping e nessuna iniezione di prop.

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

Passaggio 2: gestire i reindirizzamenti nell'hook

Sposti la logica di reindirizzamento in un hook separato (ad esempio useRequireAuth) che chiama internamente navigate e restituisce l'utente.

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

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

  return { user, loading };
}

Passaggio 3: aggiornare il componente

Sostituisca il wrapper HOC con una chiamata diretta all'hook all'interno del componente. Il componente chiama esplicitamente useRequireAuth e gestisce il caricamento. Ora la sua dipendenza è visibile.

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

Confronto dei vantaggi

La versione con hook offre: (1) nessun wrapper aggiuntivo in DevTools, (2) una dipendenza esplicita — nel componente è visibile `useRequireAuth`, (3) la possibilità di eseguire test tramite il mocking dell'hook, (4) la componibilità con altri hook nello stesso componente.

Testare la versione con hook

Esegua il mock di useRequireAuth nel test sostituendo l'esportazione del relativo modulo. Per il test del componente è sufficiente eseguire il rendering del componente e verificare l'output: non è necessaria alcuna configurazione HOC.

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

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

Quando mantenere un HOC

Mantenga l'HOC se deve proteggere in modo dichiarativo molti componenti (ad esempio nelle definizioni delle route) e non vuole aggiungere la chiamata all'hook in ognuno di essi. Può persino creare l'HOC SOPRA l'hook.

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

Il meglio di entrambi gli approcci

L'architettura finale prevede: un hook useRequireAuth da usare direttamente nei componenti E un HOC withAuth sottile, costruito sopra di esso, per la protezione dichiarativa delle route. Entrambi condividono la stessa logica dell'hook.

Verifica rapida

Qual è il principale vantaggio di chiamare useRequireAuth all'interno di un componente invece di avvolgerlo con un HOC withAuth?

Rispondi nella lezione interattiva

Riepilogo

Esegua il refactoring degli HOC trasformandoli in hook: estragga la logica in un hook personalizzato, sposti gli effetti collaterali (come i reindirizzamenti) nell'hook e lo chiami direttamente nel componente. Costruisca un HOC sottile sopra l'hook quando è necessario un wrapping dichiarativo.

Corso completato

Congratulazioni! Ha completato **Pattern React: render prop e HOC**. Ora comprende entrambi i pattern classici, i relativi compromessi e come eseguire il refactoring trasformandoli in moderni hook personalizzati.

Gratis per iniziare

Impara React con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 88
Lezioni: 324

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Refactoring di un HOC in un Custom Hook» è gratuita?

Sì — il testo completo di «Refactoring di un HOC in un Custom Hook» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Refactoring di un HOC in un Custom Hook»?

Converti passo dopo passo un HOC withAuth in un hook useAuth. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Refactoring di un HOC in un Custom Hook»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Pattern Render Props
Higher-Order Component (HOC): spiegazione
HOC, Render Props e Custom Hook a confronto
Refactoring di un HOC in un Custom Hook

← Torna a React Academy