Кои методи на жизнения цикъл съществуват в React и как да ги имитираме с useEffect?

В React класов компонент има няколко метода за жизнения цикъл, като основните са:

• componentDidMount — извиква се след монтирането на компонента;
• componentDidUpdate — извиква се след актуализирането на компонента;
• componentWillUnmount — извиква се преди демонтирането на компонента.

В функционалните компоненти с hook useEffect тези методи могат да бъдат емулирани по следния начин:

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // код, който се изпълнява веднъж след монтирането
    console.log('Mounted');
  }, []); // празен масив с зависимости

  // componentDidUpdate
  useEffect(() => {
    // код, който се изпълнява при промяна на props или състояние
    console.log('Updated');
  }); // без втори аргумент — извиква се след всеки рендер

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // код за почистване преди демонтиране
      console.log('Unmounted');
    };
  }, []);

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

По този начин, useEffect с празен масив от зависимости емулира componentDidMount и componentWillUnmount (чрез функцията за почистване), а useEffect без втори аргумент — componentDidUpdate.