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

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()

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()

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()

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()

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

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

React dev.