React'da hook yozishda qanday qoidalar mavjud?

• Foydalanadigan hooklarni faqat funksional komponentlarning yuqori darajasida yoki boshqa maxsus hooklar ichida chaqiring. Hooklarni tsikllarda, shartlarda yoki ichki funksiyalarda chaqirmang.
• React funksional komponentlar ichida faqat hooklarni chaqiring. Oddiy JavaScript funksiyalari yoki sinf komponentlarida chaqirmang.
• useCallback yordamida funksiyalarni memoizatsiya qilish va useMemo yordamida hisoblashlarni memoizatsiya qilish ishlashni optimallashtirishga yordam beradi.
• useEffect yordamida yon ta'sirlarni (ma'lumotlarni yuklash, obuna bo'lish va boshqalar) boshqaring va effektni bajarishni nazorat qilish uchun bog'liqlik massivini belgilang.
• Har bir komponentni qayta render qilishda hooklarni chaqirish tartibiga rioya qiling. React bu tartibga asoslanadi, shuning uchun holat va effektlar to'g'ri bog'lanadi.
• useEffect, useCallback, useMemo uchun barqaror bog'liqliklarni bog'liqlik massivlarida foydalaning. Har bir renderda yaratilgan obyektlar yoki funksiyalarni keraksiz joyda o'tkazmang.
• Holatni qayta ishlash uchun maxsus hooklar yarating. Maxsus hooklarning nomlari use bilan boshlanishi kerak.

// To'g'ri misol: hooklarni yuqori darajada chaqirish
function MyComponent() {
  const [count, setCount] = useState(0); // Yuqori darajada

  useEffect(() => { // Yuqori darajada
    document.title = `Siz ${count} marta bosdingiz`;
  }, [count]); // Bog'liqlik massiv

  const handleClick = useCallback(() => { // Yuqori darajada
    setCount(c => c + 1);
  }, []); // Memoizlangan funksiya

  return (
    <div>
      <p>Siz {count} marta bosdingiz</p>
      <button onClick={handleClick}>
        Menga bosing
      </button>
    </div>
  );
}

// Noto'g'ri misol: hookni shartda chaqirish
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // Noto'g'ri: shartda chaqirish
//   }
//   // ...
// }

// Noto'g'ri misol: hookni siklda chaqirish
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // Noto'g'ri: siklda chaqirish
//   }
//   // ...
// }