React Context untuk State Tema

Mulailah dengan memanggil createContext() menggunakan nilai bawaan yang sesuai dengan bentuk konteks Anda: const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} }). Nilai bawaan ini hanya digunakan ketika komponen membaca konteks tanpa penyedia induk, sehingga membantu pengujian komponen secara terisolasi.

Komponen ThemeProvider adalah pembungkus yang menampung semua logika tema. Komponen ini membaca preferensi sistem saat pertama kali dipasang, mengelola status theme, menyediakan fungsi toggleTheme, dan membungkus komponen anak dengan ThemeContext.Provider value={{ theme, toggleTheme }}. Letakkan komponen ini di dekat bagian atas pohon komponen Anda.

Komponen turunan apa pun dapat mengakses tema dengan memanggil useContext(ThemeContext). Pemanggilan ini mengembalikan nilai konteks saat ini, termasuk theme dan toggleTheme. Komponen akan melakukan perenderan ulang secara otomatis ketika tema berubah, sehingga selalu tersinkron tanpa harus meneruskan properti melalui banyak tingkat.

Variabel CSS bergantung pada atribut data-theme pada elemen akar. Di dalam ThemeProvider, tambahkan useEffect yang berjalan setiap kali theme berubah: document.documentElement.setAttribute('data-theme', theme). Cara ini menjembatani status React dan lapisan CSS dengan lancar.

Untuk mempertahankan pilihan pengguna setelah halaman dimuat ulang, tulislah ke localStorage setiap kali tema berubah: localStorage.setItem('theme', theme). Anda dapat merangkum logika ini dalam pengait kustom useLocalStorage yang mengembalikan pasangan mirip status dan secara otomatis menyimpan setiap pembaruan.

Saat menginisialisasi status tema, bacalah localStorage terlebih dahulu: localStorage.getItem('theme'). Jika tidak ada nilai tersimpan, gunakan preferensi sistem sebagai cadangan melalui window.matchMedia('(prefers-color-scheme: dark)').matches. Inisialisasi ini hanya berjalan sekali saat komponen dipasang.

Urutan prioritas yang benar dari yang tertinggi hingga terendah adalah: preferensi pengguna yang tersimpan di localStorage, kemudian preferensi sistem operasi, lalu nilai bawaan yang ditetapkan langsung (biasanya terang). Urutan ini memastikan pengguna selalu memiliki kendali terakhir, sekaligus tetap menghormati konfigurasi OS jika mereka belum memilih secara eksplisit di aplikasi.

Memanggil useContext(ThemeContext) secara langsung di setiap komponen akan mengekspos detail implementasi. Sebagai gantinya, ekspor pengait useTheme: function useTheme() { return useContext(ThemeContext); }. Kini komponen cukup mengimpor useTheme dan memanggilnya tanpa perlu mengetahui konteks yang mendasarinya.

Fungsi toggleTheme beralih antara light dan dark: setTheme(prev => prev === 'light' ? 'dark' : 'light'). Sediakan fungsi ini melalui konteks agar tombol mana pun di seluruh pohon komponen dapat memicunya. Status berada di satu tempat, sedangkan logika pengalihan digunakan di mana-mana.

Objek nilai konteks dibuat ulang pada setiap perenderan ThemeProvider. Bungkus objek tersebut dengan useMemo untuk mencegah perenderan ulang yang tidak perlu pada semua konsumen konteks: const value = useMemo(() => ({ theme, toggleTheme }), [theme]). Ini adalah pengoptimalan kinerja yang umum untuk penyedia konteks.

Dalam pengujian, bungkus perenderan dengan utilitas kustom renderWithTheme yang menggunakan ThemeProvider sebagai pembungkus. Anda juga dapat membuat konteks tiruan ringan untuk pengujian terisolasi: ThemeContext.Provider value={{ theme: 'dark', toggleTheme: jest.fn() }}. Dengan begitu, Anda dapat menguji komponen dalam status tema tertentu.

Berapakah urutan prioritas yang benar untuk menginisialisasi tema aplikasi, dari prioritas tertinggi hingga terendah?

Buat ThemeContext dan ThemeProvider yang mengelola status tema, menyinkronkannya ke localStorage, dan menetapkan data-theme pada dokumen. Gunakan pengait praktis useTheme agar konteks mudah digunakan. Urutan prioritasnya adalah: preferensi tersimpan, kemudian preferensi sistem, lalu nilai bawaan.