Skip to content

Instantly share code, notes, and snippets.

@pointofpresence
Created May 23, 2020 11:37
Show Gist options
  • Save pointofpresence/22d507ec185f20fa3a1685a0512ddeb7 to your computer and use it in GitHub Desktop.
Save pointofpresence/22d507ec185f20fa3a1685a0512ddeb7 to your computer and use it in GitHub Desktop.
Правила хуков

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

В 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