Ποια στάδια περνούν τα στοιχεία React από τη δημιουργία τους μέχρι την αφαίρεσή τους από το DOM;

Τα συστατικά React περνούν από διάφορα βασικά στάδια κύκλου ζωής, από τη δημιουργία μέχρι την αφαίρεση από το DOM:

1. Μόνταρισμα (Mounting) — δημιουργία και εισαγωγή του συστατικού στο DOM.

   • Constructor
   • static getDerivedStateFromProps
   • render
   • componentDidMount

2. Ενημέρωση (Updating) — συμβαίνει όταν αλλάζουν τα props ή το state.

   • static getDerivedStateFromProps
   • shouldComponentUpdate
   • render
   • getSnapshotBeforeUpdate
   • componentDidUpdate

3. Αποσυναρμολόγηση (Unmounting) — αφαίρεση του συστατικού από το DOM.

   • componentWillUnmount

4. Διαχείριση σφαλμάτων (Error Handling) — σε περίπτωση σφαλμάτων στα παιδικά συστατικά.

   • static getDerivedStateFromError
   • componentDidCatch

Παράδειγμα χρήσης μεθόδων κύκλου ζωής σε κλασικό συστατικό:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Το συστατικό έχει τοποθετηθεί');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Το συστατικό ενημερώθηκε');
  }

  componentWillUnmount() {
    console.log('Το συστατικό θα αφαιρεθεί');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

Σε λειτουργικά συστατικά με hooks, παρόμοια στάδια υλοποιούνται μέσω useEffect και άλλων hooks.