Context ఎప్పుడు మంచి స్థితి పరిష్కారం మరియు ఎప్పుడు కాదు?

Question

Accepted Answer

React **Context API** మీకు prop drilling లేకుండా మొత్తం కాంపోనెంట్ సబ్‌ట్రీ తో విలువను పంచుకోవడానికి అనుమతిస్తుంది. ఇది **నిమ్న-ఫ్రీక్వెన్సీ, విస్తృతంగా-భాగస్వామ్య** డేటా కోసం గొప్పది — కానీ ఇది *పూర్తి* స్థితి-నిర్వహణ పరిష్కారం కాదు మరియు తరచుగా మారుతున్న స్థితికి ri-render pitfall ఉంది. ## 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 ``` ## Pitfall: ఏదైనా మార్పులో ప్రతి వినియోగదారు ri-render చేస్తారు ```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 ``` సందర్భ విలువ మారినప్పుడు, **అన్ని** సందర్భాన్ని వినియోగించే కాంపోనెంట్‌లు ri-render చేస్తాయి — అవి మారిన భాగాన్ని ఉపయోగిస్తున్నారా అని లేకుండా. తరచుగా-అప్‌డేట్ చేయిన స్థితి కోసం, ఇది పనితీరు సమస్యలను కలిగిస్తుంది. Context లో నిర్మిత ఎంపిక చేయబడిన సబ్‌స్క్రిప్షన్ లేదు. ## Mitigations మరియు ప్రత్యామ్నాయ ```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 ``` స్థితి లైబ్రరీలు (Zustand, Redux, Jotai) ri-render సమస్యను **ఎంపిక చేయబడిన సబ్‌స్క్రిప్షన్** తో పరిష్కరిస్తాయి — కాంపోనెంట్‌లు అవి ఉపయోగించే స్లైస్‌లకు మాత్రమే సబ్‌స్క్రైబ్ చేస్తాయి మరియు అవి మారినప్పుడు మాత్రమే ri-render చేస్తాయి: ```js const count = useStore(s => s.count); // re-renders ONLY when count changes ``` ## Context స్థితి నిర్వాహకం కాదు ```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 యొక్క మధుర స్థానం — మరియు దాని పరిమితులు — రెండు సాధారణ తప్పులను నిరోధిస్తుంది: Context లో ఉండవలసిన విషయాలను prop-drilling చేయడం, మరియు అధిక-ఫ్రీక్వెన్సీ స్థితిని Context లో ఉంచడం (అనువర్తన-వ్యాప్త ri-renders కారణమవుతుంది). నియమం: Context **విరళ-మారుతున్న, విస్తృతంగా-భాగస్వామ్య** విలువలకు (థీమ్, వినియోగదారు, లోకేల్); **తరచుగా-మారుతున్న లేదా పెద్ద** భాగస్వామ్య స్థితి కోసం ఎంపిక చేయబడిన సబ్‌స్క్రిప్షన్ కలిగిన అంకితమైన స్టోర్. Context స్థితిని పంపిణీ చేస్తుంది కానీ నిర్వహించదని అర్థం చేసుకోవడం ఎప్పుడు సరిపోతుంది మరియు ఎప్పుడు మరిన్నిది కావాలో స్పష్టం చేస్తుంది.