Koje faze prolaze React komponente od njihovog kreiranja do uklanjanja iz DOM-a?

React komponente prolaze kroz nekoliko glavnih faza životnog ciklusa, od kreiranja do uklanjanja iz DOM-a:

1. Montiranje (Mounting) — kreiranje i umetanje komponente u DOM.

   • Constructor
   • static getDerivedStateFromProps
   • render
   • componentDidMount

2. Ažuriranje (Updating) — dešava se kada dođe do promene props ili stanja.

   • static getDerivedStateFromProps
   • shouldComponentUpdate
   • render
   • getSnapshotBeforeUpdate
   • componentDidUpdate

3. Demontiranje (Unmounting) — uklanjanje komponente iz DOM-a.

   • componentWillUnmount

4. Obrada grešaka (Error Handling) — u slučaju grešaka u decom komponentama.

   • static getDerivedStateFromError
   • componentDidCatch

Primer korišćenja metoda životnog ciklusa u klasičnom komponentu:

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

  componentDidMount() {
    console.log('Komponenta je montirana');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Komponenta je ažurirana');
  }

  componentWillUnmount() {
    console.log('Komponenta će biti uklonjena');
  }

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

U funkcionalnim komponentama sa hook-ovima, slični faze se implementiraju putem useEffect i drugih hook-ova.