Перейти к основному содержимому

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>;
}