Ποιοι κανόνες υπάρχουν για τη συγγραφή hooks στο…

Καλείτε τα hooks μόνο στο ανώτερο επίπεδο των λειτουργικών συστατικών ή μέσα σε άλλα προσαρμοσμένα hooks. Μην καλείτε hooks σε βρόχους, συνθήκες ή εμφωλευμένες λειτουργίες.
Καλείτε τα hooks μόνο μέσα σε React λειτουργικά συστατικά. Μην τα καλείτε σε κανονικές λειτουργίες JavaScript ή σε συστατικά κλάσεων.
Η χρήση του useCallback για την απομνημόνευση λειτουργιών και του useMemo για την απομνημόνευση υπολογισμών βοηθά στη βελτιστοποίηση της απόδοσης.
Χρησιμοποιήστε το useEffect για παρενέργειες (φόρτωση δεδομένων, συνδρομές κ.λπ.), καθορίζοντας έναν πίνακα εξαρτήσεων για τον έλεγχο της εκτέλεσης του αποτελέσματος.
Τηρείτε τη σειρά κλήσης των hooks σε κάθε ανανέωση του συστατικού. Το React βασίζεται σε αυτή τη σειρά για να συνδέσει σωστά την κατάσταση και τα αποτελέσματα.
Χρησιμοποιήστε σταθερές εξαρτήσεις στους πίνακες εξαρτήσεων του useEffect, useCallback, useMemo. Μην περνάτε αντικείμενα ή λειτουργίες που δημιουργούνται σε κάθε ανανέωση χωρίς ανάγκη.
Δημιουργήστε προσαρμοσμένα hooks για την επανάχρηση της λογικής κατάστασης μεταξύ συστατικών. Τα ονόματα των προσαρμοσμένων hooks πρέπει να αρχίζουν με use.

// Σωστό παράδειγμα: καλώντας hooks στο ανώτερο επίπεδο
function MyComponent() {
  const [count, setCount] = useState(0); // Στο ανώτερο επίπεδο

  useEffect(() => { // Στο ανώτερο επίπεδο
    document.title = `Έχετε πατήσει ${count} φορές`;
  }, [count]); // Πίνακας εξαρτήσεων

  const handleClick = useCallback(() => { // Στο ανώτερο επίπεδο
    setCount(c => c + 1);
  }, []); // Μνημονευμένη λειτουργία

  return (
    <div>
      <p>Έχετε πατήσει {count} φορές</p>
      <button onClick={handleClick}>
        Πάτα με
      </button>
    </div>
  );
}

// Λάθος παράδειγμα: καλώντας ένα hook σε συνθήκη
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // ΛΑΘΟΣ: κλήση σε συνθήκη
//   }
//   // ...
// }

// Λάθος παράδειγμα: καλώντας ένα hook σε βρόχο
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // ΛΑΘΟΣ: κλήση σε βρόχο
//   }
//   // ...
// }

Ποιοι κανόνες υπάρχουν για τη συγγραφή hooks στο React;