რა მეთოდები არსებობს React-ის ციკლში და როგორ იმიტიროთ მათ გამოყენებით useEffect?

React класстык компонентинде жашоо циклинин бир нече методу бар, алардын негизгилери:

• componentDidMount — компонент орнотулгандан кийин чакырылат;
• componentDidUpdate — компонент жаңыртылганда чакырылат;
• componentWillUnmount — компонент ажыратылгандан мурун чакырылат.

Функционалдык компоненттерде useEffect hook менен бул методдорду төмөндөгүчө имитациялоо мүмкүн:

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.