Global बनाम Local State का उपयोग कब करें
colocation के सिद्धांत को लागू करें: state को उसके consumer के जितना संभव हो उतना पास रखें और केवल तब ऊपर ले जाएँ जब कई असंबंधित components को उसकी आवश्यकता हो।
Global बनाम Local State का उपयोग कब करें, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
स्टेट के स्थान का प्रश्न
स्टेट के हर हिस्से का एक सबसे उपयुक्त स्थान होता है। गलत स्थान चुनने पर या तो प्रॉप ड्रिलिंग की समस्या होती है या अनावश्यक ग्लोबल स्टेट की जटिलता बढ़ती है। मार्गदर्शक सिद्धांत यह है: स्टेट को उसके उपयोगकर्ताओं के जितना संभव हो उतना निकट रखें।
स्थानीय कॉम्पोनेंट स्टेट
यदि स्टेट का उपयोग केवल एक कॉम्पोनेंट करता है, तो उसे उसी कॉम्पोनेंट के useState/ref में रखना चाहिए। इसे साझा करने की आवश्यकता नहीं है — इसे स्थानीय रखें। यह सबसे सरल और सबसे सामान्य स्थिति है।
// Good: UI state local to the component
function Accordion() {
const [isOpen, setIsOpen] = useState(false); // only this component cares
return (
<div>
<button onClick={() => setIsOpen(o => !o)}>Toggle</button>
{isOpen && <div>Content</div>}
</div>
);
}स्टेट को ऊपर ले जाना
जब दो सहोदर कॉम्पोनेंट को एक ही स्टेट की आवश्यकता हो, तो उसे उनके सबसे निकट के साझा पूर्वज तक ऊपर ले जाएँ। इसे प्रॉप्स और कॉलबैक के रूप में नीचे भेजें। ग्लोबल स्टोर का उपयोग करने से पहले React/Vue में यही मानक तरीका है।
साझा कॉन्टेक्स्ट — मध्यम-स्तरीय साझाकरण
जब प्रॉप ड्रिलिंग के बिना किसी उपवृक्ष में स्टेट साझा करना हो, तो Context (React) या provide/inject (Vue) सही साधन है। इसका उपयोग मध्यम दायरे वाले साझाकरण (किसी पृष्ठ या फीचर मॉड्यूल) के लिए किया जाता है।
ग्लोबल स्टोर — पूरे अनुप्रयोग का स्टेट
ऐसे स्टेट के लिए ग्लोबल स्टोर (Redux, Zustand, Pinia) का उपयोग करें जो: 1) कई असंबंधित कॉम्पोनेंट द्वारा उपयोग किया जाता हो, 2) नेविगेशन के बाद भी बना रहना चाहिए, 3) जिसमें अद्यतन तर्क जटिल हो, 4) DevTools निरीक्षण से लाभान्वित होता हो।
उदाहरण: स्थानीय स्टेट
स्थानीय स्टेट इन स्थितियों के लिए उपयुक्त है: फ़ॉर्म फ़ील्ड के मान, टूलटिप का खुला/बंद होना, मोडल की दृश्यता, होवर की स्थिति, ऐनिमेशन की स्थिति, किसी एक कॉम्पोनेंट तक सीमित लोडिंग संकेतक।
उदाहरण: ऊपर ले जाया गया स्टेट
ऊपर ले जाया गया स्टेट इन स्थितियों के लिए उपयुक्त है: दो सहोदर सूचियों द्वारा उपयोग किया जाने वाला साझा फ़िल्टर, टैब समूह में चुना गया टैब, दो चरणों के बीच साझा किया गया फ़ॉर्म डेटा।
उदाहरण: कॉन्टेक्स्ट / Provide
Context इन स्थितियों के लिए उपयुक्त है: वर्तमान थीम, प्रमाणित उपयोगकर्ता, स्थानीय भाषा, फीचर फ़्लैग, अधिसूचना स्टैक — यानी ऐसी चीज़ें जिनका उपयोग कई स्तरों पर होता है, लेकिन जिन्हें कम बार अद्यतन किया जाता है।
उदाहरण: ग्लोबल स्टोर
ग्लोबल स्टोर इन स्थितियों के लिए उपयुक्त है: शॉपिंग कार्ट, प्रमाणीकरण टोकन और उपयोगकर्ता ऑब्जेक्ट, अधिसूचना कतार (संदेश कहीं से भी टोस्ट में दिखाई दें), ऐसा रीयल-टाइम डेटा जिसे कई दृश्य एक साथ दिखाते हों।
सर्वर स्टेट बनाम क्लाइंट स्टेट
नेटवर्क डेटा (जो किसी API से प्राप्त किया जाता है) एक विशेष श्रेणी है: सर्वर स्टेट। इसमें लोडिंग और त्रुटि प्रबंधन, कैशिंग और अमान्यकरण की आवश्यकता होती है। React Query / SWR / TanStack Query सर्वर स्टेट का प्रबंधन करते हैं, ताकि आपका स्टोर वास्तविक क्लाइंट स्टेट पर ध्यान दे सके।
सामान्य गलती: सब कुछ ग्लोबल स्टोर में रखना
सारा स्टेट ग्लोबल स्टोर में केवल एहतियात के तौर पर न रखें। स्थानीय स्टेट कम खर्चीला, सरल और परीक्षण करने में आसान होता है। ग्लोबल स्टेट का अत्यधिक उपयोग उन कॉम्पोनेंट के बीच निर्भरता पैदा करता है जिन्हें स्वतंत्र होना चाहिए।
निर्णय-ढाँचा
पूछें: 1) क्या अन्य कॉम्पोनेंट को इसकी आवश्यकता है? नहीं → स्थानीय। 2) क्या निकटवर्ती सहोदर कॉम्पोनेंट को इसकी आवश्यकता है? हाँ → ऊपर ले जाएँ। 3) क्या कॉम्पोनेंट के किसी उपवृक्ष को इसकी आवश्यकता है? हाँ → कॉन्टेक्स्ट/provide। 4) क्या कई असंबंधित कॉम्पोनेंट को इसकी आवश्यकता है, या क्या इसे DevTools में देखना आवश्यक है? हाँ → ग्लोबल स्टोर।
त्वरित जाँच
किसी एक accordion कॉम्पोनेंट की खुली/बंद स्थिति कहाँ रखनी चाहिए?
पुनरावलोकन: स्टेट का स्थान
सिद्धांत: स्टेट को उसके उपयोगकर्ताओं के जितना संभव हो उतना निकट रखें। एकल कॉम्पोनेंट के स्टेट के लिए स्थानीय useState/ref। सहोदर कॉम्पोनेंट के बीच साझाकरण के लिए स्टेट को ऊपर ले जाएँ। उपवृक्ष के साझाकरण के लिए Context/provide। जटिल अद्यतनों वाले पूरे अनुप्रयोग के स्टेट के लिए ग्लोबल स्टोर। सर्वर स्टेट (API डेटा) React Query/SWR में होना चाहिए, ग्लोबल स्टोर में नहीं।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “Global बनाम Local State का उपयोग कब करें” पाठ निःशुल्क है?
हाँ—“Global बनाम Local State का उपयोग कब करें” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“Global बनाम Local State का उपयोग कब करें” में मैं क्या सीखूँगा?
colocation के सिद्धांत को लागू करें: state को उसके consumer के जितना संभव हो उतना पास रखें और केवल तब ऊपर ले जाएँ जब कई असंबंधित components को उसकी आवश्यकता हो। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“Global बनाम Local State का उपयोग कब करें” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Redux Toolkit: createSlice और configureStore
- Lightweight React State के लिए Zustand
- Vue के लिए Pinia: defineStore और storeToRefs
- Global बनाम Local State का उपयोग कब करें