Jaké metody životního cyklu existují v Reactu a jak je pomocí useEffect emulovat?

Ve třídní komponentě React existuje několik metod životního cyklu, z nichž hlavní jsou:

• componentDidMount — je volána po namontování komponenty;
• componentDidUpdate — je volána po aktualizaci komponenty;
• componentWillUnmount — je volána před odmontováním komponenty.

U funkčních komponent s hookem useEffect lze tyto metody emulovat následovně:

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // kód, který se spustí jednou po namontování
    console.log('Mounted');
  }, []); // prázdné pole závislostí

  // componentDidUpdate
  useEffect(() => {
    // kód, který se spustí při změně props nebo stavu
    console.log('Updated');
  }); // bez druhého argumentu — volá se po každém renderu

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // kód čištění před odmontováním
      console.log('Unmounted');
    };
  }, []);

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

Tímto způsobem useEffect s prázdným polem závislostí emuluje componentDidMount a componentWillUnmount (přes funkci čištění), a useEffect bez druhého argumentu — componentDidUpdate.