React Context do przechowywania stanu motywu

Należy rozpocząć od wywołania createContext() z wartością domyślną odpowiadającą strukturze kontekstu: const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} }). Wartość domyślna jest używana wyłącznie wtedy, gdy komponent odczytuje kontekst bez nadrzędnego komponentu Provider, co ułatwia testowanie izolowanych komponentów.

Komponent ThemeProvider opakowuje całą logikę motywu. Odczytuje preferencje systemowe podczas montowania, zarządza stanem theme, udostępnia funkcję toggleTheme i opakowuje elementy potomne w ThemeContext.Provider value={{ theme, toggleTheme }}. Należy umieścić go blisko początku drzewa komponentów.

Dowolny komponent potomny może uzyskać dostęp do motywu, wywołując useContext(ThemeContext). Zwraca to bieżącą wartość kontekstu, obejmującą theme i toggleTheme. Komponent automatycznie renderuje się ponownie po zmianie motywu, dzięki czemu jest zawsze zsynchronizowany bez przekazywania właściwości przez wiele poziomów.

Zmienne CSS zależą od atrybutu data-theme na elemencie głównym. W komponencie ThemeProvider należy dodać funkcję useEffect, która uruchamia się po każdej zmianie theme: document.documentElement.setAttribute('data-theme', theme). W ten sposób stan Reacta jest płynnie łączony z warstwą CSS.

Aby zachować wybór użytkownika po przeładowaniu strony, należy zapisywać go w localStorage przy każdej zmianie motywu: localStorage.setItem('theme', theme). Można zamknąć tę logikę w niestandardowym hooku useLocalStorage, który zwraca parę podobną do stanu i automatycznie zapisuje każdą aktualizację.

Podczas inicjalizacji stanu motywu należy najpierw odczytać wartość z localStorage: localStorage.getItem('theme'). Jeśli nie ma zapisanej wartości, należy użyć preferencji systemowej za pośrednictwem window.matchMedia('(prefers-color-scheme: dark)').matches. Ta inicjalizacja jest wykonywana tylko raz podczas montowania.

Prawidłowa kolejność od najwyższego do najniższego priorytetu to: preferencja użytkownika zapisana w localStorage, następnie preferencja systemu operacyjnego, a na końcu zakodowana na stałe wartość domyślna, zwykle jasna. Taka kolejność zapewnia użytkownikowi ostateczną kontrolę, a jednocześnie uwzględnia konfigurację systemu, jeśli użytkownik nie dokonał jawnego wyboru w aplikacji.

Bezpośrednie wywoływanie useContext(ThemeContext) w każdym komponencie ujawnia szczegóły implementacji. Zamiast tego należy wyeksportować hook useTheme: function useTheme() { return useContext(ThemeContext); }. Komponenty mogą teraz importować useTheme i wywoływać go bez znajomości bazowego kontekstu.

Funkcja toggleTheme przełącza między wartościami light i dark: setTheme(prev => prev === 'light' ? 'dark' : 'light'). Należy udostępnić ją przez kontekst, aby dowolny przycisk w drzewie mógł ją wywołać. Stan jest przechowywany w jednym miejscu, a logika przełączania jest współdzielona w całej aplikacji.

Obiekt wartości kontekstu jest tworzony na nowo przy każdym renderowaniu komponentu ThemeProvider. Należy opakować go w useMemo, aby zapobiec niepotrzebnemu ponownemu renderowaniu wszystkich konsumentów kontekstu: const value = useMemo(() => ({ theme, toggleTheme }), [theme]). Jest to popularna optymalizacja wydajności dostawców kontekstu.

W testach należy opakowywać renderowanie w niestandardową funkcję pomocniczą renderWithTheme, która używa ThemeProvider jako opakowania. Można również utworzyć prosty mock kontekstu na potrzeby izolowanych testów: ThemeContext.Provider value={{ theme: 'dark', toggleTheme: jest.fn() }}. Umożliwia to testowanie komponentów w określonym stanie motywu.

Jaka jest prawidłowa kolejność priorytetów podczas inicjalizowania motywu aplikacji, od najwyższego do najniższego priorytetu?

Należy utworzyć ThemeContext i komponent ThemeProvider, który zarządza stanem motywu, synchronizuje go z localStorage i ustawia data-theme w dokumencie. Do wygodnego korzystania z kontekstu należy używać pomocniczego hooka useTheme. Kolejność priorytetów to: zapisana preferencja, następnie preferencja systemowa, a na końcu wartość domyślna.