Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Правила хуков

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

В 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>;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment