Welke lifecycle-methoden bestaan er in React en hoe emuleer je ze met useEffect?

In een React-klassecomponent zijn er verschillende lifecycle-methoden, waarvan de belangrijkste:

• componentDidMount — wordt aangeroepen na het monteren van de component;
• componentDidUpdate — wordt aangeroepen na het bijwerken van de component;
• componentWillUnmount — wordt aangeroepen voordat de component wordt ontmanteld.

In functionele componenten met de hook useEffect kunnen deze methoden als volgt worden geëmuleerd:

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // code die één keer wordt uitgevoerd na het monteren
    console.log('Mounted');
  }, []); // lege afhankelijkheidsarray

  // componentDidUpdate
  useEffect(() => {
    // code die wordt uitgevoerd bij verandering van props of state
    console.log('Updated');
  }); // zonder tweede argument — wordt na elke rendering aangeroepen

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // opruimcode vóór het ontmantelen
      console.log('Unmounted');
    };
  }, []);

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

Op deze manier emuleert useEffect met een lege afhankelijkheidsarray componentDidMount en componentWillUnmount (via de opruimfunctie), en useEffect zonder tweede argument — componentDidUpdate.