Context ni suluhisho nzuri ya hali wakati gani na sio wakati gani?

Question

Accepted Answer

React **Context API** inakuruhusu kushiriki thamani na subtree nzima ya sehemu bila prop drilling. Ni nzuri sana kwa **data inayobadilika chache, inayoshirikiwa kwa mapana** — lakini si *suluhisho kamili* la usimamizi wa hali na ina hatari ya kutengeneza upya kwa hali inayobadilika mara kwa mara. ## Wakati Context inang'aa ```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 ``` ## Hatari: kila mutumiaji wa context kutengeneza upya kwa BADILIKO LOLOTE ```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 ``` Wakati thamani ya context inabadilika, **sehemu zote** zinazotumia context hii kutengeneza upya — bila kujali kama zinatumia sehemu iliyobadilika. Kwa hali inayobadilika mara kwa mara, hii husababisha matatizo ya utendaji. Context haina usajili wa kuzibishwa ndani. ## Mapokezi na mbadala ```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 ``` Kitabu cha hali (Zustand, Redux, Jotai) kutatua tatizo la kutengeneza upya kwa **usajili wa kuzibishwa** — sehemu zinajisajili tu katika sehemu zinazozotumia na kutengeneza upya tu zikibadilika: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context sio meneja wa hali ```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. ``` ## Kwa nini ni muhimu Kujua mahali pa Context kupumzika — na mipango yake — husambaza makosa mawili ya kawaida: prop-drilling vitu vinavyolingana kuwa katika Context, na kuweka hali ya juu-frequency katika Context (husababisha kutengeneza upya kwa programu nzima). Kanuni: Context kwa **thamani inayobadilika chache, inayoshirikiwa kwa mapana** (mandhari, mtumiaji, eneo); duka linalojikita lenye usajili wa kuzibishwa kwa **hali inayobadilika mara kwa mara au kubwa** iliyoshirikiwa. Kuelewa kwamba Context husambaza hali lakini haisimamizi inaandisha wakati inatosha na wakati unahitaji zaidi.