Ce etape parcurg componentele React de la crearea lor până la eliminarea din DOM?

Componentele React trec prin mai multe etape principale ale ciclului de viață, de la creare până la eliminarea din DOM:

1. Montare (Mounting) — crearea și inserarea componentei în DOM.

   • Constructor
   • static getDerivedStateFromProps
   • render
   • componentDidMount

2. Actualizare (Updating) — are loc atunci când props sau starea se schimbă.

   • static getDerivedStateFromProps
   • shouldComponentUpdate
   • render
   • getSnapshotBeforeUpdate
   • componentDidUpdate

3. Demontare (Unmounting) — eliminarea componentei din DOM.

   • componentWillUnmount

4. Gestionarea erorilor (Error Handling) — în cazul apariției erorilor în componentele copil.

   • static getDerivedStateFromError
   • componentDidCatch

Exemplu de utilizare a metodelor de ciclu de viață într-o componentă de clasă:

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

  componentDidMount() {
    console.log('Component montat');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component actualizat');
  }

  componentWillUnmount() {
    console.log('Component va fi eliminat');
  }

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

În componentele funcționale cu hooks, etapele similare sunt implementate prin useEffect și alte hooks.