🖥 Framer Motion - это мощная библиотека анимации для React.

Она позволяет добавлять анимированные кнопки, исчезающий текст и многое другое - всего в нескольких строках кода.

В этом уроке показано как использовать Framer Motion для создания полностью анимированной боковой панели в React.

• Код проекта
• Урок
• Github

@react_tg

🖥 Огромная коллекция React-компонентов и библиотек.

Готовые решения на все случаи жизни.

📌 Github

@react_tg

🖥 Наглядная структура проекта React:

Главные принципы при разработке проектов:
✅ масштабируемость
✅ аккуратность кода
✅ ясность

@react_tg

Почему в React важен порядок вызова хуков?

Понимание механизмов работы хуков 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