Kapan Context adalah solusi state yang baik dan kapan tidak?

Question

Accepted Answer

React's **Context API** memungkinkan Anda membagikan nilai dengan seluruh subtree komponen tanpa prop drilling. Ini bagus untuk data **low-frequency, widely-shared** — tetapi bukan solusi state-management lengkap dan memiliki pitfall re-render untuk state yang sering berubah. ## Kapan 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 ``` ## Pitfall: setiap consumer 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 ``` Ketika nilai context berubah, **semua** komponen yang mengonsumsi context itu re-render — terlepas dari apakah mereka menggunakan bagian yang berubah. Untuk state yang sering diperbarui, ini menyebabkan masalah performa. Context tidak memiliki selective subscription bawaan. ## 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 ``` State libraries (Zustand, Redux, Jotai) menyelesaikan masalah re-render dengan **selective subscriptions** — komponen berlangganan hanya slice yang mereka gunakan dan re-render hanya ketika itu berubah: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context bukan state manager ```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 batasannya — mencegah dua kesalahan umum: prop-drilling hal yang seharusnya di Context, dan menempatkan state high-frequency di Context (menyebabkan app-wide re-renders). Aturannya: Context untuk nilai **rarely-changing, widely-shared** (tema, user, locale); dedicated store dengan selective subscriptions untuk state **frequently-changing atau large** yang dibagikan. Memahami bahwa Context mendistribusikan state tetapi tidak mengelolanya memperjelas kapan itu cukup dan kapan Anda membutuhkan lebih banyak.