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

❔ Grid vs Flex для центрирования — как делать правильно

Когда нужен простой и предсказуемый центр по обеим осям — Grid справляется быстрее и чище, чем Flex.

➡️ Когда Grid — точное решение:

• модальные окна
• лоадеры и спиннеры
• empty states
• hero-блоки
• карточки с иконками и коротким текстом

Любой статичный компонент, где центр — ключевая точка внимания.

💡 Полезный приём

place-items — это шорткат для align-items + justify-items.

Можно настраивать оси раздельно:

.container {
  display: grid;
  place-items: start center; /* вертикаль | горизонталь */
}

➡️ Когда Flex всё ещё лучше:

Flex выигрывает в динамических сценариях:
• несколько элементов в строке
• space-between / space-around
• адаптивный wrap
• навигация, списки, карточки в ряду

Если нужно распределить несколько элементов, а не центрировать один — выбирайте Flex.

🌐 Поддержка: Chrome 59+, Firefox 45+, Safari 11+, Edge 79+

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

#hotfix #css

🛡️ TypeScript: безопасный доступ к вложенным свойствам

Никаких больше “Cannot read property of undefined”!

// Опасно
const city = user.address.city;
// Ошибка, если address === undefined

// Многословно
const city = user && user.address && user.address.city;

// Безопасно и элегантно
const city = user?.address?.city ?? 'Не указан’;

🔴 Optional chaining (?.)
Возвращает undefined, если слева null или undefined, и не пытается читать свойство дальше.

🔴 Nullish coalescing (??)
Возвращает правую часть только если слева null или undefined.

💡 Чем отличается от ||:

const volume = settings.volume ?? 0.5;
// Если volume = 0, вернёт 0 — корректно

const volume = settings.volume || 0.5;
// Если volume = 0, вернёт 0.5 — нежелательное поведение

✅ Где использовать:

— ответы API
— вложенные объекты конфигурации
— поля форм, которые могут отсутствовать
— опциональные коллбэки

🈁 Примеры:

// Массивы
const first = users?.[0]?.name ?? 'Гость';

// Функции
onClick?.();

// Сложные цепочки
const price = product?.variants?.[0]?.price?.amount ?? 0;

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

#hotfix #ts

🔄 Retry для fetch запросов

Сетевые ошибки случаются постоянно. Простое решение на 15 строк:

✅ Что делает:

— Автоматический retry при временных ошибках
— Экспоненциальная задержка (1s → 2s → 4s)
— Не retry'ит клиентские ошибки (400, 401, 403, 404)
— Retry только для: 408, 429, 500, 502, 503, 504

Пример использования:

try {
  const res = await fetchWithRetry('/api/data');
  const data = await res.json();
  console.log(data);
} catch (err) {
  console.error('Все попытки неудачны:', err);
}

⚠️ fetch НЕ отклоняет промис на HTTP ошибках — нужна проверка response.ok

🈁 Где использовать:

— GET/PUT/DELETE запросы
— Загрузка конфигурации
— Webhook'и

🔤 Не использовать:

— POST без идемпотентности
— Операции с оплатой

📍 Навигация: [Вакансии]

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

#hotfix

⚛️ React: правильный useEffect с setInterval

Типичная ошибка — класть состояние в зависимости эффекта, который сам его обновляет.

❌ Плохо

count в зависимостях → useEffect пересоздаёт setInterval каждую секунду.

✅ Правильно

Функциональное обновление → интервал создаётся один раз, состояние всегда актуально.

Правило из документации:

Если новое состояние зависит от предыдущего — используйте функциональное обновление.
useEffect не должен перезапускаться из-за собственного setState.

📍 Навигация: [Вакансии]

🎁 Новогодняя акция: 3 курса по цене 1
🤝 Помощь с выбором курса

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

#hotfix #react