Koja pravila postoje za pisanje hookova u React-u…

Позивајте hook-ове само на највишем нивоу функционалних компоненти или унутар других прилагођених hook-ова. Не позивајте hook-ове у циклусима, условима или унутрашњим функцијама.
Позивајте hook-ове само унутар React функционалних компоненти. Не позивајте их у обичним JavaScript функцијама или у класним компонентама.
Коришћење useCallback за меморисање функција и useMemo за меморисање израчунавања помаже у оптимизацији перформанси.
Користите useEffect за споредне ефекте (учитавање података, претплате итд.), наведеном низом зависности за контролу извршавања ефекта.
Пратите редослед позивања hook-ова при сваком рендеру компонента. React се ослања на овај редослед за правилно повезивање стања и ефеката.
Користите стабилне зависности у низовима зависности useEffect, useCallback, useMemo. Не преносите објекте или функције које се креирају при сваком рендеру без потребе.
Креирајте прилагођене hook-ове за поновну употребу логике стања између компоненти. Имена прилагођених hook-ова треба да почињу са use.

// Правилан пример: позивање hook-ова на највишем нивоу
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>
  );
}

// Неправилан пример: позивање hook-а у услову
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // НЕПРАВИЛНО: у услову
//   }
//   // ...
// }

// Неправилан пример: позивање hook-а у циклусу
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // НЕПРАВИЛНО: у циклусу
//   }
//   // ...
// }

Koja pravila postoje za pisanje hookova u React-u?