Για ποιο λόγο χρησιμοποιείται η οδηγία useState;

useState είναι ένα hook του React που επιτρέπει την προσθήκη κατάστασης σε λειτουργικά συστατικά. Επιστρέφει έναν πίνακα με δύο στοιχεία: την τρέχουσα τιμή της κατάστασης και μια συνάρτηση για την ενημέρωσή της. Όταν καλείται η συνάρτηση ενημέρωσης, το συστατικό ανανεώνεται με τη νέα τιμή.

Παράδειγμα χρήσης:

import { useState } from 'react';

function Counter() {
  // 'count' είναι η τρέχουσα κατάσταση, 'setCount' η συνάρτηση για την ενημέρωσή της
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Μετρητής: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Αυξήστε
      </button>
    </div>
  );
}

Βασικά χαρακτηριστικά:

• Προσθέτει κατάσταση: Επιτρέπει τη χρήση κατάστασης σε λειτουργικά συστατικά, προηγουμένως διαθέσιμη μόνο σε κλάσεις.
• Συνάρτηση ενημέρωσης: Επιστρέφει μια ειδική συνάρτηση για την αλλαγή της κατάστασης.
• Ανακατασκευή: Η αλλαγή της κατάστασης μέσω της συνάρτησης ενημέρωσης προκαλεί ανακατασκευή του συστατικού.
• Απλές τιμές και αντικείμενα: Μπορεί να αποθηκεύσει οποιοδήποτε τύπο δεδομένων: αριθμούς, συμβολοσειρές, boolean, αντικείμενα, πίνακες.
• Αργή αρχικοποίηση: Η αρχική τιμή μπορεί να είναι μια συνάρτηση που εκτελείται μόνο κατά την πρώτη ανακατασκευή, χρήσιμη για δαπανηρούς υπολογισμούς.

const [data, setData] = useState(() => {
  // Δαπανηροί υπολογισμοί εκτελούνται μόνο μία φορά
  const initialData = someExpensiveCalculation();
  return initialData;
});