Quali metodi del ciclo di vita esistono in React e come emularli con useEffect?

In un componente di classe React, ci sono diversi metodi del ciclo di vita, tra cui:

• componentDidMount — chiamato dopo il montaggio del componente;
• componentDidUpdate — chiamato dopo l'aggiornamento del componente;
• componentWillUnmount — chiamato prima dello smontaggio del componente.

Nei componenti funzionali con l'hook useEffect, questi metodi possono essere emulati come segue:

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // codice che viene eseguito una volta dopo il montaggio
    console.log('Mounted');
  }, []); // array di dipendenze vuoto

  // componentDidUpdate
  useEffect(() => {
    // codice che viene eseguito al cambiamento di props o stato
    console.log('Updated');
  }); // senza secondo argomento — chiamato dopo ogni render

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // codice di pulizia prima dello smontaggio
      console.log('Unmounted');
    };
  }, []);

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

In questo modo, useEffect con array di dipendenze vuoto emula componentDidMount e componentWillUnmount (tramite la funzione di pulizia), e useEffect senza secondo argomento — componentDidUpdate.