Bilakah Context adalah solusi state yang baik dan bilakah tidak?

Question

Accepted Answer

**Context API** React membolehkan anda berkongsi nilai dengan seluruh subtree komponen tanpa prop drilling. Ia bagus untuk data **frekuensi rendah, dikongsi secara meluas** — tetapi ia bukan solusi pengurusan state lengkap dan mempunyai jebakan re-render untuk state yang berubah dengan kerap. ## Apabila Context bersinar ```jsx const ThemeContext = createContext("light"); function App() { const [theme, setTheme] = useState("light"); return ( {/* any descendant can read theme — no prop drilling */} ); } ``` ```text Good fits (data that's read widely but changes rarely): ✓ Theme (dark/light) ✓ Current user / auth ✓ Locale / i18n ✓ App-wide config or feature flags ``` ## Jebakan: setiap pengguna re-render pada SETIAP perubahan ```jsx // ❌ a context value that changes often re-renders ALL consumers const AppContext = createContext(); // value = { user, cart, notifications, ...everything } // → updating ONE field re-renders EVERY component using the context ``` Apabila nilai context berubah, **semua** komponen yang menggunakan context itu akan re-render — tanpa mengira sama ada mereka menggunakan bahagian yang berubah. Untuk state yang sering dikemaskini, ini menyebabkan masalah prestasi. Context tidak mempunyai langganan selektif terbina dalam. ## Mitigasi dan alternatif ```text ✓ Split into multiple focused contexts (ThemeContext, UserContext separately) ✓ Memoize the value object (useMemo) so it doesn't change identity needlessly ✗ But for high-frequency or large shared state → use a real store ``` Perpustakaan state (Zustand, Redux, Jotai) menyelesaikan masalah re-render dengan **langganan selektif** — komponen melanggan hanya slice yang mereka gunakan dan hanya re-render apabila yang itu berubah: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context bukan pengurusan state ```text Context = a TRANSPORT mechanism (passes a value down), NOT state management itself. You still need useState/useReducer to hold the state; Context just distributes it. ``` ## Mengapa ini penting Mengetahui sweet spot Context — dan hadnya — menghalang dua kesalahan biasa: prop-drilling perkara yang seharusnya berada dalam Context, dan meletakkan state frekuensi tinggi dalam Context (menyebabkan re-render seluruh aplikasi). Peraturan: Context untuk nilai **jarang berubah, dikongsi secara meluas** (tema, pengguna, lokasi); store khusus dengan langganan selektif untuk state **sering berubah atau besar**. Memahami bahawa Context mengedarkan state tetapi tidak mengurusnya menjelaskan apabila ia cukup dan apabila anda memerlukan lebih.