Πώς λειτουργεί το hook `useState`;

Question

Accepted Answer

`useState` δίνει σε ένα functional component ένα κομμάτι **τοπικής, αντιδραστικής κατάστασης**. Επιστρέφει ένα ζευγάρι: την **τρέχουσα τιμή** και μια **συνάρτηση setter**. Η κλήση του setter προγραμματίζει ένα re-render με τη νέα τιμή.

```jsx
const [count, setCount] = useState(0); // 0 is the initial value
setCount(count + 1);   // value form
setCount(c => c + 1);  // functional form (preferred when based on previous)
```

## Δύο πράγματα που εκπλήσσουν τους αρχάριους

**1. Οι ενημερώσεις είναι ασύγχρονες / batched.** Το `count` δεν αλλάζει στη γραμμή μετά το `setCount`; έχει τη νέα τιμή στο *επόμενο* render. Ο παρακάτω κώδικας αυξάνει μόνο μία φορά:

```jsx
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
```

Χρησιμοποιήστε το **functional updater** όταν η επόμενη τιμή εξαρτάται από την προηγούμενη, επειδή το React περνάει την πιο πρόσφατη τιμή:

```jsx
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
```

**2. Η αρχική τιμή χρησιμοποιείται μόνο στο πρώτο render.** Για μια δαπανηρή προεπιλογή, περάστε μια συνάρτηση ώστε να εκτελείται μία φορά (lazy init):

```jsx
const [data] = useState(() => expensiveInit()); // runs once, not every render
```

## Γιατί είναι σημαντικό

Η κατάσταση είναι αυτό που κάνει ένα component διαδραστικό — το React εκτελεί ξανά τη συνάρτηση και κάνει re-render το UI κάθε φορά που αλλάζει η κατάσταση.

Αντιμετωπίστε την κατάσταση ως **immutable**: δημιουργήστε ένα νέο array/object αντί να κάνετε mutation, π.χ. `setItems([...items, x])`, διαφορετικά το React ενδέχεται να μην ανιχνεύσει την αλλαγή.