Ce metode de ciclu de viață există în React și cum le poți emula cu useEffect?

Într-un component de clasă React, există mai multe metode ale ciclului de viață, dintre care principalele sunt:

• componentDidMount — este apelată după montarea componentului;
• componentDidUpdate — este apelată după actualizarea componentului;
• componentWillUnmount — este apelată înainte de demontarea componentului.

În componentele funcționale cu hook-ul useEffect, aceste metode pot fi emulate după cum urmează:

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // cod care se execută o singură dată după montare
    console.log('Mounted');
  }, []); // array de dependențe gol

  // componentDidUpdate
  useEffect(() => {
    // cod care se execută la schimbarea props sau stare
    console.log('Updated');
  }); // fără al doilea argument — se apelează după fiecare randare

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // cod de curățare înainte de demontare
      console.log('Unmounted');
    };
  }, []);

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

Astfel, useEffect cu un array de dependențe gol emulează componentDidMount și componentWillUnmount (prin funcția de curățare), iar useEffect fără al doilea argument — componentDidUpdate.