Ποια είναι η διαφορά μεταξύ τοπικής και παγκόσμιας κατάστασης;

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

Η παγκόσμια κατάσταση είναι δεδομένα που πολλά ασχετα στοιχεία πρέπει να διαβάσουν ή να ενημερώσουν συνεπώς: ο ταυτοποιημένος χρήστης, το θέμα, το καλάθι αγορών, ειδοποιήσεις σε ολόκληρη την εφαρμογή. Ζει σε ένα 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("");
```

Για να κάνετε τα πάντα παγκόσμια προστίθεται boilerplate, συνδέονται τα στοιχεία και μπορεί να βλάψει την απόδοση (περισσότερες επανα-αποδόσεις). Η καλύτερη πρακτική είναι να **διατηρήσετε την κατάσταση όσο το δυνατόν περισσότερο τοπική**, και να καταφύγετε σε παγκόσμια κατάσταση μόνο όταν η κοινή χρήση το απαιτεί πραγματικά.

## Γιατί έχει σημασία

Η επιλογή μεταξύ τοπικής και παγκόσμιας κατάστασης είναι μία από τις πιο σημαντικές αποφάσεις κατάστασης.

Η διατήρηση της κατάστασης τοπικής κρατά τα στοιχεία απλά, αυτόνομα και αποδοτικά· η απλή χρήση παγκόσμιας κατάστασης όταν τα δεδομένα είναι πραγματικά κοινά αποφεύγει τη περιττή πολυπλοκότητα.

Το συχνό anti-pattern — να βάζετε όλα τα πράγματα σε ένα παγκόσμιο store "απλώς για την περίπτωση" — οδηγεί σε φουσκωτές, σφιχτά συνδεδεμένες εφαρμογές.

Ο καθοδηγητικός κανόνας: **τοπικοποιήστε ως προεπιλογή, παγκοσμιοποιήστε μόνο όταν η κοινή χρήση το απαιτεί.**