स्थानीय आणि वैश्विक स्थिती यांच्यातील फरक काय आहे?

Question

Accepted Answer

**स्थानीय स्थिती** एका घटकाला (किंवा छोट्या उप-वृक्षामध्ये) असते आणि इतरत्र आवश्यक नसते. **वैश्विक स्थिती** संपूर्ण अनुप्रयोगभर अनेक, अनेकदा दूरस्थ, घटकांमध्ये सामायिक केली जाते.

## स्थानीय स्थिती — एका घटकामध्ये मर्यादित

```jsx
function SearchBox() {
  const [query, setQuery] = useState(""); // only THIS component needs `query`
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}
```

स्थानीय स्थिती घटकाच्या आत राहते (`useState`, `ref`, `data()`). उदाहरणे: इनपुट मूल्ये, ड्रॉपडाउन उघडलेली आहे की नाही, होव्हर स्थिती, फॉर्मचा मसुदा. कोणत्याही इतर घटकाला त्याचा काही अर्थ नाही.

## वैश्विक स्थिती — अनुप्रयोग-व्यापी सामायिक

```jsx
// 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), किंवा समान मध्ये राहते.

## कसे निर्णय घ्यायचे

```text
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
```

## एक सामान्य गोष्ट: जास्त वैश्विकीकरण

```jsx
// ❌ 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("");
```

सर्वकाही वैश्विक बनवल्याने बॉयलरप्लेट जोडला जातो, घटक संयोजित होतात, आणि कार्यप्रदर्शन हानिकारक होऊ शकते (अधिक पुन:रेंडर). सर्वोत्तम पद्धत म्हणजे **स्थिती शक्य तितकी स्थानीय ठेवा**, आणि केवळ जेव्हा सामायिकरण खरोखरच आवश्यक असेल तेव्हा वैश्विक स्तरावर उभारा.

## हे महत्वाचे का आहे

स्थानीय विरूद्ध वैश्विक निवडणे हा सर्वाधिक परिणामी स्थिती निर्णयांपैकी एक आहे.

स्थिती स्थानीय ठेवल्याने घटक सरल, स्व-पर्याप्त, आणि कार्यक्षम राहतात; केवळ जेव्हा डेटा खरोखरच सामायिक हो तेव्हा वैश्विक स्थितीसाठी पोहोचणे अनावश्यक जटिलता टाळते.

वारंवार विरोधी-नमुना — "फक्त नक्की करताना" वैश्विक स्टोअरमध्ये सर्वकाही ठेवणे — फुगलेल्या, घट्टपणे जोडलेल्या अनुप्रयोगांकडे नेते.

मार्गदर्शक नियम: **डिफॉल्टनुसार स्थानीयकृत करा, केवळ सामायिकरण मागणी करते तेव्हाच वैश्विक करा.**