Milyen életciklus-módszerek léteznek a React-ben, és hogyan lehet őket useEffect segítségével emulálni?

Egy React osztálykomponensben több életciklus-metódus van, amelyek közül a fők:

• componentDidMount — a komponens felszerelése után hívódik meg;
• componentDidUpdate — a komponens frissítése után hívódik meg;
• componentWillUnmount — a komponens leválasztása előtt hívódik meg.

Funkcionális komponensekben a useEffect hook segítségével ezeket a módszereket a következőképpen lehet emulálni:

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // kód, amely egyszer fut a felszerelés után
    console.log('Mounted');
  }, []); // üres függőségi tömb

  // componentDidUpdate
  useEffect(() => {
    // kód, amely a props vagy az állapot változásakor fut
    console.log('Updated');
  }); // második argumentum nélkül — minden render után hívódik

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // tisztítási kód a leválasztás előtt
      console.log('Unmounted');
    };
  }, []);

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

Így a useEffect üres függőségi tömbbel emulálja a componentDidMount és a componentWillUnmount (a tisztítási funkció segítségével), a useEffect második argumentum nélkül pedig a componentDidUpdate-et.