React Academy · Lezione

Quando non usare il context

Riconosca i casi in cui il passaggio delle props, la composizione o uno state manager sono soluzioni più adatte.

Quando non usare il context è 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 imparerà quando React Context non è lo strumento adatto e riconoscerà le situazioni in cui il passaggio delle props, la composizione o un gestore di stato rappresentano una soluzione migliore e più semplice.

Il Context non è una panacea

Il Context viene spesso usato in eccesso. Gli sviluppatori vi ricorrono per evitare di passare qualsiasi prop, ma questo crea dipendenze nascoste, rende i componenti più difficili da testare e può penalizzare le prestazioni.

Quando è meglio usare le prop

Se un valore viene utilizzato da 1–3 componenti strettamente annidati, passarlo tramite prop è più semplice, esplicito e facile da seguire. Il Context aggiunge codice boilerplate per il provider e nasconde il flusso dei dati.

// Don't need Context for this
function Page() {
  const [color, setColor] = useState('blue');
  return <Header color={color} />; // simple, clear
}

Quando è meglio usare la composizione

Se deve evitare di attraversare 3 o più livelli, provi prima la composizione: passi come prop il consumer già completamente renderizzato. Non serve il Context e il flusso dei dati resta esplicito.

Il Context crea accoppiamento nascosto

Un componente che chiama useContext(UserCtx) non può essere riutilizzato senza racchiuderlo in un UserProvider. Le prop rendono esplicite le dipendenze: dalla firma può vedere esattamente ciò di cui un componente ha bisogno.

Aggiornamenti ad alta frequenza

Non utilizzi il Context per valori che cambiano molte volte al secondo, ad esempio la posizione del mouse o l'avanzamento di un'animazione. Ogni cambiamento esegue nuovamente il rendering di tutti i consumer. Utilizzi invece ref, store esterni o una libreria basata sui signal.

Il Context non è un gestore dello stato

Il Context distribuisce soltanto valori: non include caching integrato, devtools o middleware. Per uno stato condiviso complesso con aggiornamenti frequenti, utilizzi Zustand, Redux o Jotai, progettati appositamente per questo scopo.

Lo stato del server non va nel Context

I dati recuperati da un server, come un elenco di utenti o dei post, non vanno inseriti nel Context. React Query, SWR o RTK Query gestiscono lo stato del server con caching, aggiornamenti in background e gestione degli errori; il Context non offre nessuna di queste funzionalità.

Lo stato dei moduli non va nel Context

Gestire i campi di un modulo nel Context fa sì che ogni pressione di un tasto esegua nuovamente il rendering di tutti i consumer del Context. Utilizzi invece lo stato locale del componente o una libreria per i moduli come React Hook Form.

Quando il Context è lo strumento giusto

Il Context è ideale per: l'utente corrente o lo stato di autenticazione, il tema (chiaro/scuro), la lingua o i18n e altri valori trasversali stabili che molti componenti leggono ma cambiano raramente.

Verifica rapida

Quale tipo di dati è MENO adatto a essere memorizzato nel Context di React?

Riepilogo

Utilizzi il Context per valori trasversali e stabili come autenticazione, tema e lingua. Preferisca le prop per 1–3 livelli di passaggio. Preferisca la composizione per evitare il prop drilling. Utilizzi React Query per lo stato del server e Zustand o Redux per lo stato condiviso complesso.

Corso completato

Congratulazioni! Ha completato **React Context Patterns & Performance**. Ora sa come suddividere i context, memorizzare i valori, applicare i selettori e, cosa altrettanto importante, quando non usare affatto il Context.

Domande Frequenti

La lezione «Quando non usare il context» è gratuita?

Sì — il testo completo di «Quando non usare il context» è 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 «Quando non usare il context»?

Riconosca i casi in cui il passaggio delle props, la composizione o uno state manager sono soluzioni più adatte. 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 «Quando non usare il context»?

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

Separazione dei context per limitare i re-render
Memoizzazione dei valori del context con useMemo
Pattern dei context selector
Quando non usare il context

← Torna a React Academy