लोकल स्टेट एकल कम्पोनेन्ट (वा सानो सबट्री)मा सम्बन्धित हुन्छ र अन्यत्र आवश्यक हुँदैन। ग्लोबल स्टेट एप्लिकेसनभरि धेरै, प्राय: टाढाको कम्पोनेन्टहरूमा साझेदारी गरिन्छ।
लोकल स्टेट — एक कम्पोनेन्टमा सीमित
jsx
() {
[query, setQuery] = ();
;
}
लोकल स्टेट कम्पोनेन्टको भित्र बस्छ (useState, ref, data())। उदाहरणहरू: इनपुट मानहरू, ड्रपडाउन खुला छ वा छैन, hover स्टेट, फर्मको ड्राफ्ट। कुनै अन्य कम्पोनेन्टले यसको परवाह गर्दैन।
// the logged-in user is needed by the navbar, profile page, settings, checkout...
const user = useUserStore(s => s.user); // from a global store/context
ग्लोबल स्टेट डेटा हो जो धेरै असम्बन्धित कम्पोनेन्टहरूले पढ्नु र सुसंगतताले अपडेट गर्नु पर्छ: प्रमाणीकृत प्रयोगकर्ता, थिम, शपिङ कार्ट, एप्लिकेसन-व्यापी सूचनाहरू। यो Context, स्टोर (Redux/Zustand/Pinia), वा समान स्थानमा बस्छ।
Ask: "How many components need this, and how far apart are they?"
One component (or parent+child) → LOCAL state
Many unrelated components / whole app → GLOBAL state
// ❌ putting a single form's input in global state — unnecessary complexity
globalStore.setFormInput(value);
// ✅ keep it local — only this form uses it
const [value, setValue] = useState("");
सबै कुरा ग्लोबल बनाउनुले बयलरप्लेट थप्छ, कम्पोनेन्टहरूलाई जोडिन्छ, र प्रदर्शन गर्न सक्छ (अधिक re-renders)। सर्वश्रेष्ठ अभ्यास भनेको स्टेटलाई यथासम्भव लोकल राख्नु हो, र साझेदारीले वास्तवमा आवश्यकता गर्दा मात्र यसलाई ग्लोबलमा उठाउनु।
लोकल बनाम ग्लोबल छनोट गर्नु सबैभन्दा परिणामस्वरूप स्टेट निर्णयहरू मध्ये एक हो।
स्टेटलाई लोकल राख्दा कम्पोनेन्टहरू सरल, आत्मनिर्भर, र प्रभावकारी रहन्छ; ग्लोबल स्टेटको लागि मात्र डेटा साँच्चै साझेदारी गरिएको समयमा पहुँच अनावश्यक जटिलताबाट बचिन्छ।
प्रायः गलत तरिका — "रोक्नको लागि" सबै कुरा ग्लोबल स्टोरमा राख्नु — सूजिएको, कसिंगली जोडिएको एप्लिकेसनको दिशा दिन्छ।
पथप्रदर्शक नियम: पूर्वनिर्धारित रूपमा स्थानीयकरण गर्नु, साझेदारीले माग गर्दा मात्र विश्वव्यापीकरण गर्नु।
विस्तृत उत्तरसहित IT अन्तर्वार्ता प्रश्नहरूको पुस्तकालय — जुनियरदेखि सिनियरसम्म।
दान गर्नुहोस्