როდის არის Context კარგი state გადაწყვეტა და როდის არა?

Question

Accepted Answer

React-ის **Context API** საშუალებას გაძლევთ გაზიაროთ მნიშვნელობა მთელი component subtree-ს თან prop drilling-ის გარეშე. ეს შესაფერი არის **დაბალი სიხშირის, ფართოდ გაზიარებული** მონაცემებისთვის — მაგრამ ეს არ არის სრული state-management გადაწყვეტა და აქვს re-render პრობლემა ხშირად შემცვლელი state-ისთვის. ## როდის ჯერ Context ```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 ``` ## პრობლემა: ყველა consumer re-renders ნებისმიერი ცვლილებაზე ```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 ``` კონტექსტის მნიშვნელობის შეცვლისას, **ყველა** component, რომელიც იყენებს ამ კონტექსტს, re-renders — მიუხედავად იმისა, იყენებენ თუ არა ის ნაწილი რომელიც შეიცვალა. ხშირად განახლებული state-ის დროს, ეს იწვევს performance პრობლემებს. Context-ს არ აქვს built-in selective subscription. ## ზომები და ალტერნატივა ```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) ხსნიან re-render პრობლემას **selective subscriptions** ით — components აბონენტობენ მხოლოდ ის slices-ზე რომელსაც იყენებენ და re-render ხდება მხოლოდ როცა ეს შეიცვალა: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context არ არის 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. ``` ## რატომ არის ეს მნიშვნელოვანი Context-ის sweet spot-ის და მისი შეზღუდვების ცოდნა ორი გავრცელებული შეცდომის ასარიდებელია: prop-drilling რაც უნდა იყოს Context-ში, და მაღალი სიხშირის state Context-ში დასმა (რაც იწვევს app-wide re-renders-ებს). წესი: Context **იშვიათად უცვლელი, ფართოდ გაზიარებული** მნიშვნელობებისთვის (theme, user, locale); dedicated store selective subscriptions-ით **ხშირად უცვლელი ან დიდი** shared state-ისთვის. გაგება რომ Context ითხزელ state-ს მაგრამ არ მართავს მას ნათელი ხდის როდის საკმარი და როდის გჭირდებათ მეტი.