Kur është Context një zgjidhje e mirë për gjendjen dhe kur jo?

Question

Accepted Answer

React-u **Context API** ju lejon të ndani një vlerë me të gjithë nënpemën e komponentëve pa prop drilling. Është i shkëlqyer për të dhëna **të rrallë të ndryshueshme, të ndara gjerësisht** — por nuk është një zgjidhje e plotë e menaxhimit të gjendjes dhe ka një rrezik të ri-render për gjendjen që ndryshon shpesh. ## Kur Context shkëlqen ```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 ``` ## Rreziku: çdo konsumator ri-render-ohet në ÇFARËDO ndryshimi ```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 ``` Kur vlera e kontekstit ndryshon, **të gjitha** komponentet që konsumojnë atë kontekst ri-render-ohen — pavarësisht nëse ato përdorin pjesën që ndryshoi. Për gjendjen që përditësohet shpesh, kjo shkakton probleme performanceje. Context nuk ka nënshkrim selektiv të integruar. ## Zbutje dhe alternativa ```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 ``` Biblioteka të gjendjes (Zustand, Redux, Jotai) zgjidhin problemin e ri-render-imit me **nënshkrime selektive** — komponentet nënshkruhen vetëm në copëzimet që ato përdorin dhe ri-render-ohen vetëm kur ato ndryshojnë: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context nuk është një menaxher gjendjeje ```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. ``` ## Pse është e rëndësishme Njohja e pikës së ëmbël të Context — dhe kufijëve të tij — parandalon dy gabime të zakonshme: prop-drilling gjëra që duhet të jenë në Context, dhe vendosja e gjendjes me ndryshim të lartë në Context (shkaktojnë ri-render në të gjithë aplikacionin). Rregulla: Context për vlerat **të rrallë të ndryshueshme, të ndara gjerësisht** (tema, përdoruesi, vendndodhja); një dyqan i dedikuar me nënshkrime selektive për gjendjen **të rrallë të ndryshuar ose të madhe** të ndarë. Kuptimi se Context distribuon gjendjen por nuk e menaxhon atë qartëson kur është e mjaftueshme dhe kur keni nevojë për më shumë.