स्थानीय स्थिति एक एकल घटक (या एक छोटे सबट्री) से संबंधित है और अन्य कहीं आवश्यक नहीं है। वैश्विक स्थिति पूरे ऐप्लिकेशन में कई, अक्सर दूरवर्ती, घटकों में साझा की जाती है।
() {
[query, setQuery] = ();
;
}
स्थानीय स्थिति घटक के अंदर रहती है (useState, ref, data())। उदाहरण: इनपुट मान, क्या ड्रॉपडाउन खुला है, होवर स्थिति, एक फॉर्म का ड्राफ्ट। कोई अन्य घटक इसकी परवाह नहीं करता।
// 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, एक store (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("");
सबकुछ वैश्विक बनाना boilerplate जोड़ता है, घटकों को जोड़ता है, और प्रदर्शन को नुकसान पहुंचा सकता है (अधिक re-renders)। सर्वोत्तम अभ्यास है स्थिति को यथासंभव स्थानीय रखें, और इसे केवल वैश्विक स्तर पर तभी उठाएं जब साझाकरण वाकई इसकी मांग करे।
स्थानीय बनाम वैश्विक चुनना सबसे महत्वपूर्ण स्थिति निर्णयों में से एक है।
स्थिति को स्थानीय रखने से घटक सरल, आत्मनिर्भर और प्रदर्शनशील रहते हैं; केवल तभी वैश्विक स्थिति तक पहुंचना जब डेटा वाकई साझा किया जाता है, अनावश्यक जटिलता से बचता है।
बार-बार होने वाली anti-pattern — "बस के मामले में" सबकुछ एक वैश्विक store में डालना — सूजे हुए, कसकर युग्मित ऐप्स की ओर जाता है।
निर्देशक नियम: डिफ़ॉल्ट रूप से स्थानीयकृत करें, केवल तभी वैश्विक करें जब साझाकरण इसकी मांग करे।