Aké fázy prechádzajú komponenty React od ich vytvorenia po odstránenie z DOM?

Komponenty React prechádzajú niekoľkými hlavnými fázami životného cyklu, od vytvorenia po odstránenie z DOM:

1. Montovanie (Mounting) — vytvorenie a vloženie komponentu do DOM.

   • Constructor
   • static getDerivedStateFromProps
   • render
   • componentDidMount

2. Aktualizácia (Updating) — nastáva pri zmene props alebo stavu.

   • static getDerivedStateFromProps
   • shouldComponentUpdate
   • render
   • getSnapshotBeforeUpdate
   • componentDidUpdate

3. Odinštalovanie (Unmounting) — odstránenie komponentu z DOM.

   • componentWillUnmount

4. Spracovanie chýb (Error Handling) — pri chybách v detských komponentoch.

   • static getDerivedStateFromError
   • componentDidCatch

Príklad použitia metód životného cyklu v triednej komponentu:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Komponent bol namontovaný');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Komponent bol aktualizovaný');
  }

  componentWillUnmount() {
    console.log('Komponent bude odstránený');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

V funkčných komponentoch s hookmi sa podobné fázy realizujú pomocou useEffect a ďalších hookov.