⚛️ 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

🔥 Deep Clone — глубокое копирование объектов

Когда копируете объект через {...obj}, вложенные структуры остаются по ссылке. Меняете копию → меняется оригинал.

🔤 Два способа глубокого копирования:

Ограниченный, но быстрый для простых структур

const clone = (obj) => JSON.parse(JSON.stringify(obj));

Современный универсальный API (Chrome 98+, Firefox 94+, Node 17+, Safari 15+)

const clone = (obj) => structuredClone(obj);

🔤 Пример в React:

const addItem = (newItem) => {
  const clonedState = structuredClone(state);
  clonedState.items.push(newItem);
  setState(clonedState);
};

⚠️ Глубокое копирование — дорогая операция. В React его используют точечно, а не для всего состояния. В крупных приложениях лучше использовать immer или нормализованные структуры данных.

🔤 Когда deep clone действительно нужен:

— Копирование вложенных объектов и графов
— Redux / Zustand, когда нельзя мутировать state
— Снимки данных перед трансформациями
— Копирование конфигураций, где нет функций и методов

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

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

#readme #js #react