Kādi dzīves cikla metodi pastāv React un kā tos imitēt ar useEffect?

React klases komponentā ir vairākas dzīves cikla metodes, no kurām galvenās ir:

• componentDidMount — tiek izsaukta pēc komponenta montēšanas;
• componentDidUpdate — tiek izsaukta pēc komponenta atjaunināšanas;
• componentWillUnmount — tiek izsaukta pirms komponenta noņemšanas.

Funkcionālajās komponentēs ar hook useEffect šīs metodes var emulēt šādi:

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // kods, kas tiek izpildīts vienu reizi pēc montāžas
    console.log('Mounted');
  }, []); // tukšs atkarību masīvs

  // componentDidUpdate
  useEffect(() => {
    // kods, kas tiek izpildīts, mainoties props vai stāvoklim
    console.log('Updated');
  }); // bez otrā argumenta — tiek izsaukts pēc katra renderēšanas

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // tīrīšanas kods pirms noņemšanas
      console.log('Unmounted');
    };
  }, []);

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

Tādējādi useEffect ar tukšu atkarību masīvu emulē componentDidMount un componentWillUnmount (caur tīrīšanas funkciju), bet useEffect bez otra argumenta — componentDidUpdate.