React-те хуктарды жазу үшін қандай ережелер бар?

• Хук шақырулар тек функционалды компоненттердің жоғарғы деңгейінде немесе басқа пайдаланушы хуктарында орындалуы керек. Циклдарда, шарттарда немесе ішкі функцияларда хуктарды шақыруға болмайды.
• Хук шақырулар тек 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); // Қате: циклда шақыру
//   }
//   // ...
// }