Понимание механизмов работы хуков React имеет первостепенное значение для любого фронтенд-разработчика, стремящегося освоить React-фреймворк. Предоставляя массу возможностей для функциональных компонентов, хуки в то же время подчиняются ряду правил.
Непростая ситуация
Хуки очень полезны для получения данных. Когда источники данных связаны между собой, иногда нужно выполнить внутри компонента функции нечто подобное:
const { data, loading } = useGetData();
const userId = data.id;
const { relatedData } = useGetRelatedDataForUser(userId);Проблема здесь заключается в том, что userId = data.id может быть еще не определено. Прежде чем выполнять второй вызов, вы, возможно, захотите проверить, является ли загрузка loading false:
const { data, loading } = useGetData();
if (!loading){
const userId = data.id;
const { relatedData } = useGetRelatedDataForUser(userId);
}Однако если сделать что-то подобное, в консоли появится ошибка, связанная с нарушением правил использования хуков. Правила использования хуков таковы.
1. Вызывать хуки можно только на верхнем уровне компонента функции.
2. Вызывать хуки можно только на верхнем уровне другого хука.
Заметим, что хук — это любая функция, имя которой начинается со строки use. Это означает, что:
1. нельзя вызывать хук внутри условия или цикла;
2. нельзя вызывать хук после условного возврата;
3. нельзя вызывать хук в компоненте класса.
Смысл этих правил заключается в том, что порядок вызова каждого хука должен быть абсолютно одинаковым при каждом вызове компонента.
Почему порядок вызовов хуков имеет значение ⬅️ читать
@react_tg