Reactте hook жазуу үчүн кандай эрежелер бар?

• Функционалдык компоненттердин жогорку деңгээлине же башка колдонуучу хуктарга гана хуктарды чакырыңыз. Циклдарда, шарттарда же ички функцияларда хуктарды чакырбоо керек:
• Хуктарды Reactтин функционалдык компоненттеринин ичинде гана чакырыңыз. Жөнөкөй JavaScript функцияларында же класс компоненттеринде чакырбоо керек:
• useCallback функцияларды мемоизациялоо үчүн жана useMemo эсептөөлөрдү мемоизациялоо үчүн колдонуу иштөөчүүлүктү жакшыртат:
• useEffect тараптан таасирлер үчүн колдонулат (маалыматтарды жүктөө, жазылуулар жана башка), таасирдин аткарылышын көзөмөлдөө үчүн көзкаранды массивин көрсөтүү:
• Ар бир рендерде хуктердин чакырылыш тартибин сактоо. React бул тартипке ишенет абалдар жана таасирлер туура байланышын камсыз кылуу үчүн:
• useEffect, useCallback, useMemo көзкаранды массивдеринде туруктуу көзкарандыктарды колдонуу. Ар бир рендерде түзүлгөн объекттер же функцияларды керексиз болбосо өткөрбөө:
• Өзүнчө колдонуучу хуктарды түзүү, компоненттер ортосундагы абал логикасын кайра колдонуу үчүн. Колдонуучу хуктардын аттары use менен башталуусу керек:

// Туура мисал: хуктерди жогорку деңгээлде чакыруу
function MyComponent() {
  const [count, setCount] = useState(0); // Жогорку деңгээлде чакыруу

  useEffect(() => { // Жогорку деңгээлде чакыруу
    document.title = `Сиз ${count} жолу бастыңыз`;
  }, [count]); // көзкаранды массив

  const handleClick = useCallback(() => { // Жогорку деңгээлде чакыруу
    setCount(c => c + 1);
  }, []); // Мемоизацияланган функция

  return (
    <div>
      <p>Сиз {count} жолу бастыңыз</p>
      <button onClick={handleClick}>
        Мени бас
      </button>
    </div>
  );
}

// Туура эмес мисал: хуктер шартта чакыруу
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // Туура эмес: шартта чакыруу
//   }
//   // ...
// }

// Туура эмес мисал: хуктер циклда чакыруу
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // Туура эмес: циклда чакыруу
//   }
//   // ...
// }