Aké metódy životného cyklu existujú v React a ako ich emulovať pomocou useEffect?

V triedovej komponentne React existuje niekoľko metód životného cyklu, z ktorých hlavné sú:

• componentDidMount — je volaná po namontovaní komponentu;
• componentDidUpdate — je volaná po aktualizácii komponentu;
• componentWillUnmount — je volaná pred odmontovaním komponentu.

V funkčných komponentoch s hookom useEffect je možné tieto metódy emulovať nasledovne:

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // kód, ktorý sa vykoná raz po namontovaní
    console.log('Mounted');
  }, []); // prázdny zoznam závislostí

  // componentDidUpdate
  useEffect(() => {
    // kód, ktorý sa vykoná pri zmene props alebo stavu
    console.log('Updated');
  }); // bez druhého argumentu — volá sa po každom renderi

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // kód na vyčistenie pred odmontovaním
      console.log('Unmounted');
    };
  }, []);

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

Takto useEffect s prázdnym poľom závislostí emuluje componentDidMount a componentWillUnmount (cez funkciu na vyčistenie), a useEffect bez druhého argumentu — componentDidUpdate.