Πώς αλλάζουμε σωστά την κατάσταση των συστατικών στο…

Η αλλαγή της κατάστασης στο React γίνεται μέσω της μεθόδου setState για κλασικά συστατικά ή με τη χρήση του hook useState για λειτουργικά συστατικά.

Κλασικά συστατικά:

// Εισάγουμε το React
import React, { Component } from 'react';

// Δημιουργούμε κλασικό συστατικό
class MyComponent extends Component {
  // Αρχικοποιούμε την κατάσταση
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // Μέθοδος για αλλαγή της κατάστασης
  incrementCount = () => {
    // Χρησιμοποιούμε το setState
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Μετρητής: {this.state.count}</p>
        <button onClick={this.incrementCount}>Αύξηση</button>
      </div>
    );
  }
}

// Εξάγουμε το συστατικό
export default MyComponent;

Το setState είναι ασύγχρονο.
Το setState ενώνει την νέα κατάσταση με την τρέχουσα (shallow merge).
Το setState μπορεί να δεχθεί μια συνάρτηση που επιστρέφει την νέα κατάσταση, βασισμένη στην προηγούμενη:

// Μέθοδος για αλλαγή κατάστασης με χρήση συνάρτησης
incrementCountFunction = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));
};

Λειτουργικά συστατικά (με useState):

// Εισάγουμε React και useState
import React, { useState } from 'react';

// Δημιουργούμε λειτουργικό συστατικό
function MyFunctionComponent() {
  // Αρχικοποιούμε την κατάσταση με useState
  const [count, setCount] = useState(0); // [τρέχουσα κατάσταση, συνάρτηση ενημέρωσης]

  // Συνάρτηση για αλλαγή της κατάστασης
  const incrementCount = () => {
    // Χρησιμοποιούμε συνάρτηση για ενημέρωση
    setCount(count + 1);
  };

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

// Εξάγουμε το συστατικό
export default MyFunctionComponent;

Το useState επιστρέφει έναν πίνακα με δύο στοιχεία: την τρέχουσα κατάσταση και τη συνάρτηση για ενημέρωση.
Η συνάρτηση ενημέρωσης, που επιστρέφεται από το useState, αντικαθιστά την τρέχουσα κατάσταση, και όχι την συγχωνεύει.
Μπορεί να περαστεί μια συνάρτηση στη συνάρτηση ενημέρωσης αν η νέα κατάσταση εξαρτάται από την προηγούμενη:

// Συνάρτηση για αλλαγή κατάστασης με χρήση συνάρτησης
const incrementCountFunction = () => {
  setCount(prevCount => prevCount + 1);
};

Σημαντικά σημεία κατά την αλλαγή της κατάστασης:

Μην αλλάζετε την κατάσταση άμεσα: Ποτέ μην αναθέτετε μια νέα τιμή στην ιδιότητα state (π.χ. this.state.count = 5 ή count = 5). Το React δεν θα εντοπίσει αυτή την αλλαγή και η συνιστώσα δεν θα επαναφορτωθεί.
Αλλαγή αντικειμένων και πινάκων: Όταν αλλάζετε αντικείμενα ή πίνακες στην κατάσταση, δημιουργήστε πάντα νέες αντιγραφές. Το React συγκρίνει τις αναφορές και αν η αναφορά δεν αλλάξει, υποθέτει ότι τα δεδομένα δεν έχουν αλλάξει και δεν θα κάνει επαναφόρτωση.

// Αλλαγή αντικειμένου σε κλασικό συστατικό
this.setState(prevState => ({
  user: {
    ...prevState.user, // Αντιγραφή παλαιών ιδιοτήτων
    name: 'Νέο όνομα' // Ενημέρωση της επιθυμητής ιδιότητας
  }
}));

// Αλλαγή πίνακα σε λειτουργικό συστατικό
setItems(prevItems => [...prevItems, 'Νέο στοιχείο']); // Προσθέτουμε νέο στοιχείο

Ασύγχρονη setState: Αν χρειάζεται να εκτελέσετε μια ενέργεια μετά την ενημέρωση της κατάστασης και την επαναφόρτωση της συνιστώσας, χρησιμοποιήστε το δεύτερο επιχείρημα της setState (callback) ή το hook useEffect σε λειτουργικά συστατικά.

// Callback στο setState
this.setState({ count: this.state.count + 1 }, () => {
  console.log('Η κατάσταση ενημερώθηκε!');
});

// useEffect για αντίδραση στην αλλαγή κατάστασης
useEffect(() => {
  console.log('Η κατάσταση count άλλαξε:', count);
}, [count]); // Εξάρτηση: το hook ενεργοποιείται όταν αλλάξει το count

Σύγκριση μεθόδων:

Χαρακτηριστικό	Κλασικό συστατικό (`setState`)	Λειτουργικό συστατικό (`useState`)
Σύνταξη	Μέθοδος `this.setState(newState[, callback])`	Hook `const [state, setState] = useState(initialState)`
Συνένωση/Αντικατάσταση	Συνενώνει το νέο με το τρέχον (shallow merge)	Αντικαθιστά το τρέχον με το νέο
Ασύγχρονο	Είναι ασύγχρονο	Είναι ασύγχρονο κατά την κλήση από χειριστές γεγονότων, αλλά συγχρονικό κατά τη φάση render του React
Εξάρτηση από προηγούμενη κατάσταση	Μεταβιβάστε μια συνάρτηση στο `setState`: `this.setState(prevState => ({...}))`	Μεταβιβάστε μια συνάρτηση στη `setState(prev => ({...}))`

Πώς αλλάζουμε σωστά την κατάσταση των συστατικών στο React;