Context எப்போது நல்ல நிலை தீர்வு மற்றும் எப்போது இல்லை?

Question

Accepted Answer

React-ன் **Context API** ஒரு மொத்த கூறு சிற்றமர் முழுவதிலும் ஒரு மதிப்பைப் பகிரவும் prop drilling இல்லாமல் அனுமதிக்கிறது. இது **குறைந்த-அதிர்வெண், பரவலாக-பகிரப்பட்ட** தரவுகளுக்கு சிறந்தது — ஆனால் இது *முழுமையான* நிலை-மேலாண்மை தீர்வு அல்ல மற்றும் அடிக்கடி மாறும் நிலைக்கு மீ-வரைபடம் பிழையைக் கொண்டுள்ளது. ## 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 ``` ## பிழை: ஒவ்வொரு நுகர்வோரும் எந்த மாற்றத்திலும் மீ-வரைபடம் ```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 ``` பிரসঙ்கம் மதிப்பு மாறும் போது, **அனைத்து** சென்னல்கள் இந்த சென்னலைப் பயன்படுத்தி மீ-வரைபடம் — மாற்றம் அடைந்த பகுதியைப் பயன்படுத்தினாலும் பயன்படுத்தாவிட்டாலும் கூட. அடிக்கடி-புதிய நிலைக்கு, இது செயல்திறன் சிக்கல்களை ஏற்படுத்துகிறது. சென்னல் எந்த அலசுதல் இல்லை. ## தணிப்பு மற்றும் மாற்று ```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) மீ-வரைபட பிரச்சனையை **தெரிவு-அலசுதல்** உடன் தீர்க்கின்றன — கூறுகள் அவை பயன்படுத்தும் துண்டுகளுக்கு மாத்திரம் மாத்திரம் பெற்றுக்கொள்கின்றன மற்றும் அவை மாறும் போதே மீ-வரைபடம் செய்கின்றன: ```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. ``` ## ஏன் இது முக்கியமானது சென்னல்-ன் இனிய புள்ளி — மற்றும் அதன் வரம்புகள் — இரண்டு பொதுவான தவறுகளைத் தடுக்கிறது: prop-drilling விஷயங்கள் சென்னல்ச்சென்னலுக்கு இருக்க வேண்டும், மற்றும் அதிக-அதிர்வெண் நிலையை சென்னல்ச்சென்னலில் வைப்பது (பயன்பாட்டு-முழுவ மீ-வரைபடம் ஏற்படுத்தும்). விதி: சென்னல் **அரிதாக-மாறும், பரவலாக-பகிரப்பட்ட** மதிப்புகளுக்கு (சாயல், பயனர், இடம்); **அடிக்கடி-மாறும் அல்லது பெரிய** பகிரப்பட்ட நிலைக்கு தெரிவு-அலசுதல் கொண்ட பொருத்தப்பட்ட கடை. சென்னல் நிலை விநியோகம் செய்கிறது ஆனால் நிர்வகிக்கவில்லை என்பதைப் புரிந்துகொள்ளல் போதுமான போது மற்றும் போது அதிக தேவை என்பதைத் தெளிவுபடுத்துகிறது.