ਲੋਕਲ ਸਟੇਟ ਅਤੇ ਗਲੋਬਲ ਸਟੇਟ ਵਿੱਚ ਕੀ ਅੰਤਰ ਹੈ?

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()`)। ਉਦਾਹਰਣਾਂ: ਇਨਪੁਟ ਵੈਲਯੂਜ਼, ਕੀ ਡ੍ਰੌਪ ਡਾਉਨ ਖੁੱਲਾ ਹੈ, ਇੱਕ hover ਸਟੇਟ, ਇੱਕ ਫਾਰਮ ਦਾ ਡ੍ਰਾਫਟ। ਕੋਈ ਹੋਰ ਕੰਪੋਨੈਂਟ ਇਸ ਬਾਰੇ ਸੋਚਦਾ ਹੀ ਨਹੀਂ ਹੈ।

## ਗਲੋਬਲ ਸਟੇਟ — ਪੂਰੀ ਐਪ ਵਿੱਚ ਸਾਂਝੀ

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

ਗਲੋਬਲ ਸਟੇਟ ਉਹ ਡੇਟਾ ਹੈ ਜੋ ਬਹੁਤ ਸਾਰੇ ਅਸਬੰਧਤ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਲਗਾਤਾਰ ਪੜ੍ਹਨਾ ਜਾਂ ਅੱਪਡੇਟ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ: authenticated ਯੂਜ਼ਰ, theme, shopping cart, ਐਪ-ਵਿਆਪੀ ਨੋਟੀਫਿਕੇਸ਼ਨਸ। ਇਹ ਇੱਕ Context, ਸਟੋਰ (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("");
```

ਹਰ ਚੀਜ਼ ਨੂੰ ਗਲੋਬਲ ਬਣਾਉਣਾ boilerplate ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ, ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਜੋੜਦਾ ਹੈ, ਅਤੇ ਪਰਫੌਰਮੈਂਸ ਨੂੰ ਨੁਕਸਾਨ ਪਹੁੰਚਾ ਸਕਦਾ ਹੈ (ਹੋਰ re-renders)। ਬਹਤਰ ਅਭਿਆਸ ਹੈ **ਸਟੇਟ ਨੂੰ ਜਿੰਨਾ ਸੰਭਵ ਹੋ ਸਕੇ ਲੋਕਲ ਰੱਖਿਆ**, ਅਤੇ ਕੇਵਲ ਉਦੋਂ ਹੀ ਗਲੋਬਲ ਕਰਨਾ ਜਦੋਂ ਸਾਂਝਾ ਕਰਨਾ ਸੱਚਮੁੱਚ ਜਰੂਰੀ ਹੋਵੇ।

## ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ

ਲੋਕਲ ਬਨਾਮ ਗਲੋਬਲ ਵਿੱਚ ਚੁਣਨਾ ਸਭ ਤੋਂ ਅਹਿਮ ਸਟੇਟ ਫੈਸਲਿਆਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ।

ਸਟੇਟ ਨੂੰ ਲੋਕਲ ਰੱਖਣਾ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਸਧਾਰਨ, ਸਵੈ-ਸਮੀਯ ਸਮ੍ਹਤ, ਅਤੇ ਕੁਸ਼ਲ ਰੱਖਦਾ ਹੈ; ਗਲੋਬਲ ਸਟੇਟ ਲਈ ਤਦ ਹੀ ਪਹੁੰਚਣਾ ਜਦੋਂ ਡੇਟਾ ਸੱਚਮੁੱਚ ਸਾਂਝਾ ਹੋ ਬੇਲੋੜੀ ਜਟਿਲਤਾ ਤੋਂ ਬਚਦਾ ਹੈ।

ਕਾਮਨ anti-pattern — ਹਰ ਚੀਜ਼ ਨੂੰ "ਬਸ ਕਿਸੇ ਮੌਕੇ ਲਈ" global store ਵਿੱਚ ਰਖਣਾ — ਫੀਲੇ, ਤਕੜੀ ਜੋੜ ਵਾਲੀਆਂ ਐਪਾਂ ਵੱਲ ਲੈ ਜਾਂਦਾ ਹੈ।

ਮਾਰਗ ਦਰਸਕ ਨਿਯਮ: **ਪੂਰਵ-ਨਿਰਧਾਰਿਤ ਤਰੀਕੇ ਨਾਲ ਲੋਕਲ ਕਰੋ, ਗਲੋਬਲ ਕੇਵਲ ਤਦ ਜਦੋਂ ਸਾਂਝਾ ਕਰਨਾ ਮੰਗ ਕਰੇ।**