Kapan Context minangka solusi state sing apik lan kapan ora?

Question

Accepted Answer

**Context API** ing React ngidini sampeyan nuduhaken nilai karo kabeh subtree komponen tanpa prop drilling. Iku apik kanggo data **frekuensi rendah, dibagi kanthi luas** — nanging iku dudu solusi manajemen state lengkap lan duwe jebakan re-render kanggo state sing mesthi ganti. ## 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 ``` ## Jebakan: saben konsumen re-render ing SABEN owahan ```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 ``` Kapan nilai context ganti, **kabeh** komponen sing nggunakake context iku re-render — ora peduli apa padha nggunakake bagean sing ganti. Kanggo state sing mesthi dianyari, iki nyebabake masalah performa. Context ora duwe langganan selektif sing built-in. ## Mitigasi lan 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) ngatasi masalah re-render karo **langganan selektif** — komponen langganan mung slice sing padha gunakake lan re-render mung kapan sing iku ganti: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context dudu manajemen 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. ``` ## Kapan Context penting Kailan ngerti sweet spot Context — lan limitasine — nyegah loro kesalahan umum: prop-drilling barang sing kudu ing Context, lan lebon state frekuensi tinggi ing Context (nyebabake re-render sakitaran app). Aturan: Context kanggo nilai **jarang ganti, dibagi kanthi luas** (tema, pengguna, lokal); toko khusus karo langganan selektif kanggo state **sering ganti utawa gedhe**. Paham yen Context bagi state nanging ora ngempur iku njlentrehake kapan cukup lan kapan sampeyan butuh luwih.