Kokios gyvenimo ciklo metodai yra React ir kaip juos emuliuoti naudojant useEffect?

React klasės komponento gyvenimo ciklo metodų yra keletas, iš kurių pagrindiniai:

• componentDidMount — kviečiamas po komponento montavimo;
• componentDidUpdate — kviečiamas po komponento atnaujinimo;
• componentWillUnmount — kviečiamas prieš komponento išmontavimą.

Funkcinėse komponentuose su hook useEffect šiuos metodus galima emuliuoti taip:

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // kodas, kuris vykdomas vieną kartą po montavimo
    console.log('Mounted');
  }, []); // tuščias priklausomybių masyvas

  // componentDidUpdate
  useEffect(() => {
    // kodas, kuris vykdomas keičiant props ar būseną
    console.log('Updated');
  }); // be antrojo argumento — iškviečiama po kiekvieno perrėžimo

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // valymo kodas prieš išmontavimą
      console.log('Unmounted');
    };
  }, []);

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

Taip useEffect su tuščiu priklausomybių masyvu emuliuoja componentDidMount ir componentWillUnmount (per valymo funkciją), o useEffect be antrojo argumento — componentDidUpdate.