useContext per lo stato globale
Creare un Context, racchiudere un sottoalbero nel relativo Provider e consumarne il valore con useContext per condividere lo stato del tema o dell’autenticazione senza prop drilling.
useContext per lo stato globale è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Il problema del prop drilling
Il prop drilling consiste nel passare dati attraverso molti componenti intermedi che non li usano, solo per raggiungere un componente figlio annidato in profondità. Context risolve il problema rendendo un valore disponibile a qualsiasi componente dell'albero senza doverlo passare esplicitamente.
Creazione di un Context
createContext(defaultValue) crea un oggetto Context. Il valore predefinito viene usato quando un componente legge il context senza avere sopra di sé un Provider corrispondente.
import { createContext } from 'react';
interface ThemeContextType {
theme: 'light' | 'dark';
toggleTheme: () => void;
}
const ThemeContext = createContext<ThemeContextType>({
theme: 'light',
toggleTheme: () => {}
});Fornire il Context
Avvolga la parte dell'albero che necessita del context con il Provider. Tutti i componenti al suo interno possono leggere il valore del context.
function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
const toggleTheme = () => setTheme(t => t === 'light' ? 'dark' : 'light');
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
// In app root:
<ThemeProvider>
<App />
</ThemeProvider>Utilizzare il contesto con useContext
Qualsiasi componente all'interno del Provider può accedere al valore del contesto con useContext(ThemeContext). Non è necessario passare nulla come prop.
function ThemeToggle() {
const { theme, toggleTheme } = useContext(ThemeContext);
return (
<button onClick={toggleTheme}>
Switch to {theme === 'light' ? 'dark' : 'light'} mode
</button>
);
}Hook personalizzato per incapsulare useContext
Esporti un hook personalizzato che chiama internamente useContext. È più pulito che esporre direttamente il contesto e consente di aggiungere la convalida.
function useTheme() {
const ctx = useContext(ThemeContext);
if (!ctx) throw new Error('useTheme must be used inside ThemeProvider');
return ctx;
}
// Usage:
const { theme } = useTheme();Nuovi rendering con Context
Quando cambia il valore del Provider, tutti i consumer eseguono nuovamente il rendering. Se il valore è un oggetto, una nuova referenza dell'oggetto a ogni rendering farà eseguire nuovamente il rendering a tutti i consumer. Memoizzi il valore con useMemo per evitarlo.
const value = useMemo(
() => ({ theme, toggleTheme }),
[theme] // toggleTheme is stable if created with useCallback
);
<ThemeContext.Provider value={value}>Quando usare Context
Utile per: tema, locale, utente autenticato, feature flag, sistema di notifiche. Non ideale per: aggiornamenti ad alta frequenza (a ogni pressione di tasto), stato complesso e di grandi dimensioni (utilizzi invece uno store).
Contesti multipli
Può avere più contesti indipendenti. Li mantenga focalizzati: un AuthContext per l'autenticazione, un ThemeContext per il tema. Eviti un unico contesto onnipotente che contenga tutto.
Context e Redux
Context è integrato e sufficiente per dati globali che cambiano raramente. Redux/Zustand/Pinia sono migliori per stati complessi con molti aggiornamenti, il debugging con time travel o la necessità di middleware.
Pattern del contesto di autenticazione
Un pattern comune: un AuthContext che contiene l'utente corrente e i metodi di autenticazione. I componenti consumer ottengono l'utente senza alcun prop drilling.
interface AuthContext {
user: User | null;
login: (creds: Credentials) => Promise<void>;
logout: () => void;
}
const AuthCtx = createContext<AuthContext | null>(null);
export const useAuth = () => {
const ctx = useContext(AuthCtx);
if (!ctx) throw new Error('Outside AuthProvider');
return ctx;
};Tipizzazione del contesto con TypeScript
Tipizzi il contesto con un'interfaccia. Usi null come valore iniziale e generi un'eccezione nell'hook personalizzato se il valore è null. In questo modo si evita che lo stato impossibile di un contesto utilizzato al di fuori del provider passi inosservato.
Prestazioni: memo + Context
I componenti racchiusi in React.memo non eseguono nuovamente il rendering a meno che non cambino le loro props. Se l'output di un consumer del contesto dipende solo da una parte del contesto, separi il contesto o usi pattern basati su selettori per evitare rendering non necessari.
Verifica rapida
Che cosa restituisce useContext(MyContext) quando viene chiamato all'interno di un componente che non ha alcun Provider tra i suoi antenati?
Riepilogo: useContext
createContext crea un contesto con un valore predefinito. Racchiuda l'albero in Provider per fornire un valore. useContext legge il valore in qualsiasi punto al suo interno. Gli hook personalizzati incapsulano useContext per la convalida. Memoizzi il valore di Provider per evitare rendering non necessari. Lo utilizzi per dati globali che cambiano raramente, come il tema e l'autenticazione.
Domande Frequenti
La lezione «useContext per lo stato globale» è gratuita?
Sì — il testo completo di «useContext per lo stato globale» è 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «useContext per lo stato globale»?
Creare un Context, racchiudere un sottoalbero nel relativo Provider e consumarne il valore con useContext per condividere lo stato del tema o dell’autenticazione senza prop drilling. Eserciti Frontend 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 Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend 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 1 di 4.
Quanto tempo richiede la lezione «useContext per lo stato globale»?
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 Frontend Academy?
Sì. Ogni lezione Frontend 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
- useContext per lo stato globale
- useReducer per stati complessi
- useMemo e useCallback per le prestazioni
- Custom hook: estrarre logica riutilizzabile