Welke fasen doorlopen React-componenten van hun creatie tot verwijdering uit de DOM?

React-componenten doorlopen verschillende belangrijke fasen van de levenscyclus, van creatie tot verwijdering uit de DOM:

1. Mounting (Montage) — het creëren en invoegen van de component in de DOM.

   • Constructor
   • static getDerivedStateFromProps
   • render
   • componentDidMount

2. Updating (Bijwerken) — gebeurt bij wijzigingen in props of state.

   • static getDerivedStateFromProps
   • shouldComponentUpdate
   • render
   • getSnapshotBeforeUpdate
   • componentDidUpdate

3. Unmounting (Demonteren) — het verwijderen van de component uit de DOM.

   • componentWillUnmount

4. Foutafhandeling (Error Handling) — bij fouten in child componenten.

   • static getDerivedStateFromError
   • componentDidCatch

Voorbeeld van het gebruik van lifecycle-methoden in een klassecomponent:

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

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

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

  componentWillUnmount() {
    console.log('Component wordt verwijderd');
  }

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

In functionele componenten met hooks worden vergelijkbare fasen geïmplementeerd via useEffect en andere hooks.