React Context per lo stato del tema

Iniziate chiamando createContext() con un valore predefinito che corrisponda alla forma del contesto: const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} }). Il valore predefinito viene usato solo quando un componente legge il contesto senza un Provider padre, facilitando il testing di componenti isolati.

Il componente ThemeProvider è un wrapper che centralizza tutta la logica del tema. Legge la preferenza di sistema al montaggio, gestisce lo stato theme, fornisce una funzione toggleTheme e racchiude i figli in ThemeContext.Provider value={{ theme, toggleTheme }}. Posizionatelo vicino alla parte superiore dell'albero dei componenti.

Qualsiasi componente discendente può accedere al tema chiamando useContext(ThemeContext). Questo restituisce il valore corrente del contesto, inclusi theme e toggleTheme. Il componente esegue automaticamente un nuovo rendering quando il tema cambia, rimanendo sempre sincronizzato senza dover passare le prop lungo tutta la gerarchia.

Le variabili CSS dipendono da un attributo data-theme sull'elemento radice. In ThemeProvider, aggiungete un useEffect che venga eseguito ogni volta che theme cambia: document.documentElement.setAttribute('data-theme', theme). In questo modo lo stato React e il livello CSS comunicano senza soluzione di continuità.

Per mantenere la scelta dell'utente dopo i ricaricamenti della pagina, scrivete in localStorage ogni volta che il tema cambia: localStorage.setItem('theme', theme). Potete incapsulare questa logica in un hook personalizzato useLocalStorage che restituisca una coppia simile a uno stato e memorizzi automaticamente ogni aggiornamento.

Quando inizializzate lo stato del tema, leggete prima da localStorage: localStorage.getItem('theme'). Se non esiste alcun valore memorizzato, utilizzate come alternativa la preferenza di sistema tramite window.matchMedia('(prefers-color-scheme: dark)').matches. Questa inizializzazione viene eseguita una sola volta al montaggio.

L'ordine corretto, dalla priorità più alta a quella più bassa, è: la preferenza dell'utente memorizzata in localStorage, quindi la preferenza del sistema operativo e infine un valore predefinito codificato direttamente, in genere light. Quest'ordine garantisce che l'utente abbia sempre l'ultima parola, rispettando comunque la configurazione del sistema operativo se non ha effettuato una scelta esplicita nell'app.

Chiamare direttamente useContext(ThemeContext) in ogni componente espone dettagli implementativi. Esportate invece un hook useTheme: function useTheme() { return useContext(ThemeContext); }. I componenti possono così importare useTheme e chiamarlo senza conoscere il contesto sottostante.

La funzione toggleTheme alterna tra light e dark: setTheme(prev => prev === 'light' ? 'dark' : 'light'). Esponetela tramite il contesto, così qualsiasi pulsante nell'albero dei componenti può attivarla. Lo stato viene gestito in un unico punto e la logica di commutazione è condivisa ovunque.

L'oggetto che rappresenta il valore del contesto viene ricreato a ogni rendering di ThemeProvider. Racchiudetelo in useMemo per evitare rendering non necessari di tutti i consumer del contesto: const value = useMemo(() => ({ theme, toggleTheme }), [theme]). Questa è una comune ottimizzazione delle prestazioni per i Provider di contesto.

Nei test, racchiudete i rendering in un'utilità personalizzata renderWithTheme che utilizzi ThemeProvider come wrapper. Potete anche creare un mock semplice del contesto per i test isolati: ThemeContext.Provider value={{ theme: 'dark', toggleTheme: jest.fn() }}. In questo modo potete testare i componenti in uno stato del tema specifico.

Qual è l'ordine di priorità corretto per inizializzare il tema dell'app, dalla priorità più alta a quella più bassa?

Create un ThemeContext e un ThemeProvider che gestisca lo stato del tema, lo sincronizzi con localStorage e imposti data-theme nel document. Utilizzate un hook useTheme di utilità per un accesso più pulito. L'ordine di priorità è: preferenza memorizzata, quindi preferenza di sistema e infine valore predefinito.