Lifecycle metodlar huklar yordamida, yoki nega useEffect metodidan foydalanishni boshlashingiz kerak.

3 min readApr 10, 2021

Klass komponentlardan, funksional komponentlarga o’tish nisbatan qiyin bo’lishi mumkin, ayniqsa siz lifecycle metodidan juda ko’p foydalansangiz.Lekin sizni ishontirib aytishim mumkin, funksional komponentlardan foydalanish juda ham oson. Ba’zi bir, juda ham kam holatlarda ishlatiladigan metodlardan funksional komponentlar ichida foydalana olmasak ham, ushbu maqolada doimiy ishlatiladigan va sizga hayotiy loyiharda foydasi tegadigan lifecycle metodlarni qanday ishlatilishi haqida ma’lumot beramiz.

useEffect()

Lifecycle metodlaridan funksional komponent ichida foydalanishimiz uchun, bizga faqatgina useEffect() hook metodi kerak bo’ladi, va bu metodimiz react-dan import qilinadi: import {useEffect} from react; Ushbu metodimiz birinchi argumentiga funksiya, va ikkinchisiga array oladi. Ushbu hook metodimiz ikkinchi argument array ichidagi qiymatlardan birortasi o’zgargan taqdirda birinchi argumentimizga bergan funksiyamizni bajaradi. Ikkinchi argumentdagi arrayga istalgan o’zgaruvchilarimiz, asosan state va props qiymatlari ketma-ketligini bersak bo’ladi.

useEffect(()=>{
//code
}, [dep1, dep2])

Ya’ni useEffect metodimiz arrayda kelayotgan qiymatlarga to’be bo’ladi va har bir renderda eski va yangi qiymatlarni o’zaro solishtiradi, agar o’zgarish topilsa birinchi argumentda berilgan funksiyamizni run qiladi(bajaradi).

Masalan, pastdagi misolimizda har safar search yoki page qiymatlarimiz o’zgarganda, fetchArticle funksiyamiz ishga tushadi va yangi parameterlar asosida yangi ma’lumotlar olib keladi.

useEffect(()=>{
fetchArticle({page: page, limit: 10, search: search})
}, [search, page])

O’ylaymanki useEffect metodimiz qanday ishlashini tushunib oldingiz, endi ushbu metodimizdan foydalanib qay tarzda lifecycle metodlarini vazifasini bajarishimizni ko’rib chiqamiz.

Eslatma: Bir funksiyamizda yozadigan useEffect metodlarimiz soni cheklanmagan.

componentDidMount()

Ushbu lifecycle metodimizning vazifasi komponent DOMga joylashgandan so’ng bir marta run bo’ladi. Asosan ushbu metoddan backenddan ma’lumotni olib kelish, yoki biror bir jarayon yuz berganda vazifa yuklash(event listeners, subscription) kabi maqsadlarda foydalaniladi.

componentDidMount(){
  fetchArticles({page: 1, limit: 10});
}

useEffect metodi bilan bu juda oson, shunchaki qilinishi kerak bo’lgan kodimizni birinchi argumentga beradigan funksiyamiz ichida yozamiz, va ikkinchi argumentimizga bo’sh array beramiz. Bu qanday ishlaydi? Har qanday useEffect kamida bir marta DOM-ga komponentimiz joylashganidan so’ng run bo’ladi. Shunda bizning funksiyamizni birinchi marta bajarganidan so’ng, bo’sh array-lar tufayli hech qanday qiymatga to’be bo’lib qolmaydi va boshqa run bo’lmaydi.

useEffect(() => {
fetchArticles({ page: 1, limit: 10 });
}, []);

componentDidUpdate()

Ushbu metodimiz har safar komponentimiz render bo’lganda bajariladi. Ya’ni biror-bir state yoki props qiymatlarimiz o’zgarganda render chaqiriladi va shu o’rinda bizning ushbu metodham bajariladi.

componentDidUpdate(){
renderCount++;
}

Yuqorida aytilganidek, useEffect metodimiz biz belgilab qo’ygan state yoki props qiymatlarining o’zgarishiga qarab, biz yuklagan vazifani bajaradi. Lekin componentDidUpdate-ga o’xshab har safar komponentimiz qayta render bo’lganda biror bir vazifani bajarmoqchi bo’lsak, shunchaki useEffect metodimizda ikkinchi tushirib qoldiramiz.

useEffect(()=>{
renderCount++;
})

componentWillUnmount()

Oxirgi, lekin juda ham kuchli va kerakli metodlarimizdan biri bo’lmish componentWillUnmount metodimiz, komponent DOMdan olib tashlanish arafasida chaqiriladi. Asosan, subscriptionni o’chirishda va boshqa maqsadlarda foydalaniladi.

componentWillUnmount(){
unsubscribeAuth();
}Ushbu metodimizni useEffect orqali qilish ham juda oson, shunchaki istalgan ko’rinishdagi useEffect metodimizga beradigan funksiyamizdan yangi bir funksiya qaytarish kerak, va ushbu funksiyamiz componentDidUpdate metodi o’rniga o’tadi. useEffect(() => {
 return () => {
  //sizning kodingiz
  unsubscribeAuth();
 };
}, []);

Maqolamiz avvallarida aytilganidek, useEffectdan foydalanib har qanday qiymat o’zgarishiga qo’loq solishimiz va shu o’zgarishlarda bajarilishi kerak bo’lgan vazifalarni belgilashimiz mumkin. useEffect() medotidan samarali foydalanish uchun, imkon qadar bir-biriga aloqasi bo’lmagan kodlarimizni bitta useEffect metodga joylashtirmasdan imkon qadar har biri uchun alohida-alohida useEffect yozishimiz maqsadga muvvofiqdir.

Boshqa lifecycle metodlari

Biz yuqorida ma’lumot bermagan, funksional komponent ichida ishlata olmaydigan ba’zi-bir lifecycle metodlarimiz ham bor. Lekin, yodda tuting, ular juda ham kam va tor doirada ishlatiladi. Masalan: shouldComponentUpdate() — komponentning qaytadan render bo’lish bo’lmasligini hal qilish uchun o’zimizning mantiqimizni ishlatish uchun foydalaniladi; componentDidCatch(e) — react dasturimizda xato kelib chiqqanda, umumiy dasturimizni buzilmasligi va foydalanuvchiga xatoni chiqarmasdan, o’zimiz belgilagan mantiq asosida xatoimiz bilan ishlash uchun foydalaniladi.

Agar ushbu metodlardan foydalanishingiz kerak bo’lsa, klass komponentlar bilan ishlashga majbursiz.