📎 Шпаргалка по React Hooks

Хуки сделали React-компоненты проще и мощнее. Эта шпаргалка — ваш быстрый справочник по всем основным хукам с примерами кода.

Что внутри:

Разбор каждого хука по принципу «что делает → как работает → когда использовать».

➕ Подходит и новичкам для изучения, и опытным разработчикам как quick reference в работе.

🎥 Источник

🤌 Бонусы для подписчиков:
— Скидка 40% на все курсы Академии
— Розыгрыш Apple MacBook
— Бесплатный тест на знание математики

🐸 Библиотека фронтендера

#readme #react

📌 Шпаргалка React Router v7

React Router v7 объединил v6 и Remix в одну библиотеку. Два режима на выбор: легковесный Library Mode для SPA или полноценный Framework Mode с SSR.

Требования: Node.js 20+ и React 18+

➕ Шпаргалка включает установку, роутинг, навигацию, работу с данными, формы и обработку ошибок с примерами кода.

🐸 Библиотека фронтендера

#readme #react

⚛️ React: избавляемся от вложенных условий в JSX

Глубокие тернарные операторы быстро превращают JSX в нечитаемый код. Более понятный подход — ранние возвраты и предсказуемая структура рендера.

⚠️ Важное правило Hooks

Все хуки должны вызываться на верхнем уровне компонента — до любых return и условных конструкций.

React требует, чтобы хуки выполнялись в одном и том же порядке при каждом рендере. Если порядок или количество хуков изменится, возникнет ошибка.

// Ошибка: хук после return
function Component({ data }) {
  if (!data) return null;
  const [value] = useState(data); // Хук вызван условно!
}

// Правильно: хуки перед return
function Component({ data }) {
  const [value] = useState(data);
  if (!data) return null;
}

Ранние возвраты полностью безопасны, если хуки вызываются до любых условий.

✅ Альтернатива: объектный маппинг

Подходит для компонентов с большим количеством состояний:

const STATE_COMPONENTS = {
  loading: Spinner,
  error: Error,
  success: Content,
  empty: Empty
};

function DataView({ status, ...props }) {
  const Component = STATE_COMPONENTS[status];
  return Component ? <Component {...props} /> : null;
}

Важно: храните компоненты, а не JSX-элементы, чтобы свободно передавать пропсы.

➡️ Когда что использовать:

⚪️ Early Returns — оптимальны в большинстве случаев (loading / error / success).

⚪️ Объектный маппинг — подходит, когда состояний много и они определяются строковым статусом: этапы процессов, статусы заказов, типы уведомлений, шаги визардов.

💡 Начинайте с early returns — это самый простой и понятный вариант. Переходите на маппинг только тогда, когда это действительно упрощает код.

🐸 Библиотека фронтендера

#hotfix #react

🧩 Архитектура, которая делает код предсказуемым

Смешивание бизнес-логики и побочных эффектов приводит к хрупкости системы: тесты становятся тяжёлыми, изменения — рискованными, а переиспользование — ограниченным.

➡️ Imperative Shell — работа с внешним миром

email.bulkSend(
  generateExpiryEmails(
    getExpiredUsers(db.getUsers(), Date.now())
  )
);

Оболочка отвечает только за взаимодействие с БД и отправку сообщений. Бизнес-логика остаётся неизменной и предсказуемой.

➡️ Переиспользование без боли

Добавление новой функциональности не требует переписывать логику — только меняется контекст использования:

const fiveDaysFromNow = ...
email.bulkSend(
  generateReminderEmails(
    getExpiredUsers(db.getUsers(), fiveDaysFromNow)
  )
);

💡 Принцип простой:

чистые функции — для вычислений, императивная оболочка — для эффектов.

Результат — тестируемый, модульный и надёжный код, устойчивый к изменениям.

🔗 Источник: Google Testing Blog

🐸 Библиотека фронтендера

#blueuprint #react

💳 Коллекция готовых React-хуков

В неё входят решения для работы с событиями браузера, состояниями, сетевыми запросами, таймерами и другими типовыми задачами. Всё реализовано аккуратно, понятно и готово к продакшну.

➕ Проект связан с React.gg — интерактивной платформой, где показывают, как эти хуки создаются и почему работают именно так.

📎 Ссылка на коллецекцию useHooks

🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

🐸 Библиотека фронтендера

#stack #react