Welche Lifecycle-Methoden gibt es in React und wie kann man sie mit useEffect emulieren?

In einer React-Klassenkomponente gibt es mehrere Lifecycle-Methoden, darunter:

• componentDidMount — wird nach dem Mounten der Komponente aufgerufen;
• componentDidUpdate — wird nach der Aktualisierung der Komponente aufgerufen;
• componentWillUnmount — wird vor dem Demontieren der Komponente aufgerufen.

In funktionalen Komponenten mit dem Hook useEffect können diese Methoden wie folgt emuliert werden:

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // Code, der einmal nach dem Mounten ausgeführt wird
    console.log('Mounted');
  }, []); // leeres Abhängigkeitsarray

  // componentDidUpdate
  useEffect(() => {
    // Code, der bei Änderungen von Props oder State ausgeführt wird
    console.log('Updated');
  }); // ohne zweites Argument — wird nach jedem Render aufgerufen

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // Aufräumcode vor dem Demontieren
      console.log('Unmounted');
    };
  }, []);

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

Auf diese Weise emuliert useEffect mit leerem Abhängigkeitsarray componentDidMount und componentWillUnmount (über die Aufräumfunktion), und useEffect ohne zweites Argument — componentDidUpdate.