React: Правила хуков

В React есть два базовых правила использования хуков, которые обязательно нужно соблюдать:

• Хуки можно вызывать только из верхнего уровня вашего компонента. Не следует обращаться к ним из блоков условий, циклов или вложенных функций.
• Хуки можно вызывать только из функциональных компонентов. Внутри обычных JS-функций или классовых компонентов их использовать не следует.

function checkAuth() {
  // Нарушено второе правило! 
  // Не используйте хуки в обычных функциях 
  React.useEffect(() => {
    getUser();
  }, []);
}

function App() {
  // правильное использование
  const [user, setUser] = React.useState(null);

  // Нарушено первое правило!
  // Не используйте хуки в условиях и циклах
  if (!user) {
    React.useEffect(() => {
      setUser({ isAuth: false });
    }, []);
  }

  checkAuth();

  // Нарушено первое правило!
  // Не используйте хуки во вложенных функциях
  return <div onClick={() => React.useMemo(() => doStuff(), [])}>Our app</div>;
}