Jakie metody cyklu życia istnieją w React i jak je emulować za pomocą useEffect?

W komponencie klasowym React istnieje kilka metod cyklu życia, z których główne to:

• componentDidMount — wywoływana po zamontowaniu komponentu;
• componentDidUpdate — wywoływana po aktualizacji komponentu;
• componentWillUnmount — wywoływana przed odmontowaniem komponentu.

W komponentach funkcyjnych z hookiem useEffect te metody można emulować w następujący sposób:

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // kod, który wykona się raz po zamontowaniu
    console.log('Mounted');
  }, []); // pusty array zależności

  // componentDidUpdate
  useEffect(() => {
    // kod, który wykona się przy zmianie props lub stanu
    console.log('Updated');
  }); // bez drugiego argumentu — wywołuje się po każdym renderze

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // kod czyszczenia przed odmontowaniem
      console.log('Unmounted');
    };
  }, []);

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

W ten sposób useEffect z pustą tablicą zależności emuluje componentDidMount i componentWillUnmount (poprzez funkcję czyszczenia), a useEffect bez drugiego argumentu — componentDidUpdate.