Ποιοι είναι οι Κανόνες των Hooks; Γιατί δεν μπορείτε να καλέσετε ένα hook υπό όρους;

Question

Accepted Answer

Τα Hooks (`useState`, `useEffect`, κλπ.) έχουν δύο κανόνες:

1. **Καλέστε hooks μόνο στο ανώτατο επίπεδο** — ποτέ μέσα σε συνθήκες, βρόχους ή ένθετες συναρτήσεις.
2. **Καλέστε hooks μόνο από συναρτήσεις React** — συστατικά ή άλλα custom hooks.

```jsx
function Profile({ id }) {
  const [user, setUser] = useState(null); // ✅ top level
  if (id) {
    const [x] = useState(0);  // ❌ conditional hook — breaks React
  }
}
```

## Γιατί η σειρά πρέπει να είναι σταθερή

Το React **δεν** αναγνωρίζει hooks ανά όνομα — βασίζεται στη **σειρά κλήσης**. Σε κάθε απόδοση διασχίζει τα hooks με την ακριβώς ίδια σειρά και ταιριάζει κάθε κλήση με μια θέση σε μια εσωτερική λίστα:

```text
Render 1:  useState(A) → slot 0,  useState(B) → slot 1,  useEffect → slot 2
Render 2:  useState(A) → slot 0,  useState(B) → slot 1,  useEffect → slot 2
```

Αν καλέσετε ένα hook υπό όρους, η σειρά μπορεί να αλλάξει μεταξύ των αποδόσεων. Στη συνέχεια η θέση 1 θα μπορούσε να είναι `useState(B)` σε μια απόδοση και `useEffect` στην επόμενη — το React θα έδινε τη λάθος κατάσταση στο λάθος hook, καταστρέφοντας τα πάντα.

## Πώς να γράψετε σωστά την υπό όρους λογική

Γιατί το hook άνευ όρων και βάλτε την συνθήκη **μέσα** σε αυτό, ή κλαδιάστε στη βάση της τιμής που επιστρέφει:

```jsx
const [user, setUser] = useState(null);
useEffect(() => {
  if (!id) return;       // condition INSIDE the effect, not around it
  fetchUser(id).then(setUser);
}, [id]);
```

Ο κανόνας `eslint-plugin-react-hooks` lint επιβάλλει αυτούς τους κανόνες αυτόματα.