React hooklari: useState, useEffect, useRef va boshqalar misollarda

Hooklar nima va ular nima uchun kerak

Hooklar — funksional komponentga holat saqlash, o‘zgarishlarga javob berish va DOM bilan ishlash imkonini beradigan funksiyalar. Ular klass komponentlarini almashtirdi va mantiqni qayta ishlatiladigan qildi: umumiy kod hayot sikli metodlariga tarqalib ketmasdan, o‘z hookingizga chiqariladi.

Deyarli har bir loyihada kerak bo‘ladigan asosiy to‘plam:

useState: komponent holati

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

// Yangi qiymat avvalgisiga bog‘liq bo‘lsa — funksiya uzating
setCount(prev => prev + 1);

Muhim jihatlar:

• Holat o‘zgarmas. Obyekt va massivlar uchun nusxa yarating: setUser({ ...user, name }), user.name = name emas.
• Yangilanish darhol bo‘lmaydi. setCount dan keyin joriy renderda count hali eski qiymatda qoladi.
• Qimmat boshlang‘ich qiymatni funksiya sifatida bering: useState(() => parse(data)) faqat bir marta bajariladi.

useEffect va bog‘liqliklar massivi

useEffect kodni chizishdan keyin ishga tushiradi. Ikkinchi argument effekt qachon takrorlanishini belgilaydi:

• massivsiz — har bir renderdan keyin;
• [] — montajdan keyin bir marta;
• [userId] — userId o‘zgarganda.

useEffect(() => {
  const controller = new AbortController();
  fetch(`/api/users/${userId}`, { signal: controller.signal })
    .then(r => r.json())
    .then(setUser)
    .catch(() => {});
  return () => controller.abort(); // tozalash
}, [userId]);

Effekt qaytaradigan funksiya — tozalash (cleanup). U keyingi ishga tushirishdan oldin va komponent olib tashlanganda chaqiriladi. Bu yerda so‘rovlarni bekor qiling, obunalarni olib tashlang va taymerlarni to‘xtating.

useEffect bilan tipik xatolar

• Tushib qolgan bog‘liqliklar. Effekt o‘zgaruvchidan foydalansa, u massivda bo‘lishi kerak. ESLint’da react-hooks/exhaustive-deps qoidasini yoqing — u buni avtomatik topadi.
• Cheksiz sikl. Effekt o‘zi bog‘liq bo‘lgan holatni o‘zgartiradi yoki bog‘liqliklarda har renderda qayta yaratiladigan obyekt bor.
• Hisoblash uchun effekt. Qiymat props yoki holatdan chiqarilsa, uni komponent tanasida hisoblang — useEffect va ortiqcha useState kerak emas.
• Tozalash yo‘q. Tozalanmagan obunalar va intervallar xotira sizishi va takroriy ishlovchilarga olib keladi.
• So‘rovlar poygasi. Bekor qilinmasa, eski so‘rovga javob yangisidan keyin kelib, ma’lumotlarni ustidan yozishi mumkin.

useRef: DOM va qayta chizishsiz qiymatlar

const inputRef = useRef(null);
// <input ref={inputRef} />
inputRef.current.focus();

ref.current ni o‘zgartirish mumkin va bu qayta chizishni chaqirmaydi. Shuning uchun useRef taymer id’si, oldingi qiymat yoki ekranda ko‘rsatilmaydigan bayroqni saqlash uchun mos.

Hooklar qoidalari

1. Hooklarni faqat komponentning yuqori darajasida chaqiring — shartlar, sikllar va ichki funksiyalar ichida emas. React chaqiruvlar tartibiga tayanadi.
2. Hooklarni faqat komponentlar yoki boshqa hooklardan chaqiring, oddiy funksiyalardan emas.

O‘z hooklaringiz

O‘z hookingiz — nomi use bilan boshlanadigan va ichida boshqa hooklarni chaqiradigan funksiya. U takrorlanuvchi mantiqni ajratib chiqaradi:

function useDebounce(value, delay) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);
  return debounced;
}

Hookni chaqirgan har bir komponent o‘zining holatini oladi — hooklar ma’lumotni emas, mantiqni bo‘lishadi.