Ποια είναι τα methods του κύκλου ζωής στο React και πώς τα εξομοιώνουμε με useEffect;

Σε μια κλασική συνιστώσα React, υπάρχουν αρκετές μέθοδοι κύκλου ζωής, από τις οποίες οι βασικές είναι:

• componentDidMount — καλείται μετά την τοποθέτηση της συνιστώσας;
• componentDidUpdate — καλείται μετά την ενημέρωση της συνιστώσας;
• componentWillUnmount — καλείται πριν από την αποσύνδεση της συνιστώσας.

Στις λειτουργικές συνιστώσες με το hook useEffect, αυτές οι μέθοδοι μπορούν να εξομοιωθούν ως εξής:

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // κώδικας που εκτελείται μία φορά μετά την τοποθέτηση
    console.log('Mounted');
  }, []); // κενός πίνακας εξαρτήσεων

  // componentDidUpdate
  useEffect(() => {
    // κώδικας που εκτελείται κατά την αλλαγή των props ή της κατάστασης
    console.log('Updated');
  }); // χωρίς δεύτερο όρισμα — καλείται μετά από κάθε ανανέωση

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // κώδικας καθαρισμού πριν από την αποσύνδεση
      console.log('Unmounted');
    };
  }, []);

  return <div>{props.value}</div>;
}

Έτσι, το useEffect με κενό πίνακα εξαρτήσεων εξομοιώνει το componentDidMount και το componentWillUnmount (μέσω της λειτουργίας καθαρισμού), και το useEffect χωρίς δεύτερο όρισμα — το componentDidUpdate.