React-da Eng Ko'p Qilinadigan 7 Xato va Ularning Yechimi

React Dasturchilarining Eng Katta Xatolari

React kutubxonasi o'rganish uchun sodda tuyulsa-da, komponentlarning ishlash mexanizmi, holat (state) boshqaruvi va render siklini chuqur tushunmaslik loyihada kutilmagan xatoliklarga olib keladi. Ko'plab dasturchilar bir xil muammolarga qayta-qayta duch kelishadi. Ushbu maqolada React ishlab chiqish jarayonida eng ko'p uchraydigan 7 ta xatoni va ularni to'g'ri bartaraf etish usullarini ko'rib chiqamiz.

1. State-ni To'g'ridan-To'g'ri O'zgartirish (State Mutation)

React-da state o'zgarmas (immutable) bo'lishi kerak. Dasturchilar obyekt yoki massivlarni to'g'ridan-to'g'ri o'zgartirishga uringanlarida, React komponentni qayta render qilishi kerakligini sezmay qolishi mumkin.

Xato usul:

const [user, setUser] = useState({ name: 'Ali', age: 20 });

const updateAge = () => {
  user.age = 21; // Xato: Asl obyekt to'g'ridan-to'g'ri o'zgartirildi
  setUser(user);
};

To'g'ri yechim: Har doim yangi nusxa (shallow copy) yarating yoki spread operatoridan foydalaning:

const updateAge = () => {
  setUser(prevUser => ({ ...prevUser, age: 21 }));
};

2. useEffect Ichida Bog'liqliklar Ro'yxatini (Dependency Array) Noto'g'ri Ko'rsatish

useEffect hook'ining ikkinchi parametri — bog'liqliklar massivi ko'pincha muammolar manbai bo'ladi. Agar massiv bo'sh qoldirilsa yoki unga kerakli o'zgaruvchilar qo'shilmasa, komponent eskirgan (stale) qiymatlar bilan ishlaydi. Aksincha, har safar yangilanadigan funksiya yoki obyekt qo'shilsa, cheksiz render sikli (infinite loop) yuzaga keladi.

Yechim: Hook ichida ishlatilgan har qanday props yoki state o'zgaruvchisini dependency ro'yxatiga kiriting. Funksiyalarni esa useCallback orqali o'rab oling yoki to'g'ridan-to'g'ri hook ichida e'lon qiling.

3. Ro'yxat Render Qilishda Index-dan Key Sifatida Foydalanish

Massiv elementlarini map() yordamida ekranga chiqarishda har bir element uchun unikal key berish shart. Massiv indeksidan key sifatida foydalanish ro'yxat tartibi o'zgarganda yoki element o'chirilganda jiddiy UI xatolariga sabab bo'ladi.

// Xato: items.map((item, index) => <TodoItem key={index} {...item} />)

// To'g'ri: items.map((item) => <TodoItem key={item.id} {...item} />)

Har doim bazadan kelgan unikal identifikator (id) yoki uuid ishlating.

4. Asinxron State Yangilanishini Noto'g'ri Kutish

useState orqali state yangilanganda, bu jarayon asinxron tarzda bajariladi. Yangilash funksiyasini chaqirgandan so'ng darhol yangi qiymatni o'qishga urinish eskirgan natijani qaytaradi.

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(count + 1);
  console.log(count); // Bu yerda hali eski count qiymati turadi!
};

Agar yangi holat avvalgisiga bog'liq bo'lsa, har doim callback funksiyadan foydalaning: setCount(prev => prev + 1).

5. useEffect Ichida Tozalash (Cleanup) Funksiyasini Unutish

Timerlar (setInterval), WebSocket ulanishlar yoki brauzer hodisalari (addEventListener) bilan ishlaganda, komponent o'chirilganda (unmount) tozalash funksiyasini qaytarish shart. Aks holda, xotirada ortiqcha yuklama (memory leak) paydo bo'ladi.

useEffect(() => {
  const handleResize = () => console.log(window.innerWidth);
  window.addEventListener('resize', handleResize);

  // Tozalash funksiyasi
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

6. Keraksiz Ortiqcha State Yaratish

Boshqa state yoki props orqali osongina hisoblab chiqariladigan qiymatlar uchun alohida state yaratish kodni murakkablashtiradi va sinxronizatsiya xatolariga olib keladi.

Xato: firstName, lastName va ularni birlashtiruvchi alohida fullName state yaratish.

To'g'ri yechim: const fullName = `${firstName} ${lastName}`; shaklida to'g'ridan-to'g'ri hisoblang. Og'ir hisob-kitoblar bo'lsa, useMemo hook'idan foydalaning.

7. Props Drilling Muammosiga E'tibor Bermaslik

Ma'lumotni komponentlar daraxti bo'ylab 4-5 pog'ona pastga uzatish (props drilling) kodni o'qish va kengaytirishni qiyinlashtiradi. Bunday holatlarda React Context API yoki Zustand kabi yengil state boshqaruv vositalaridan foydalanish tavsiya etiladi.

Xulosa

React bilan ishlashda toza va xatosiz kod yozish komponentlar hayot siklini va state boshqaruvini to'g'ri anglashdan boshlanadi. Yuqorida keltirilgan xatolardan qochish orqali ilovangiz tezligini oshirishingiz va kelajakdagi xatoliklarning oldini olishingiz mumkin.