👨‍💻 React Server Components в React Router: зачем и как использовать

Представьте: вместо отправки данных клиенту, их обработки и рендера — вы просто отдаёте готовый UI с сервера. Никакой лишней гидратации, меньший бандл, быстрее загрузка.

Зачем это нужно:

🔢 Меньше JS на клиенте — UI рендерится на сервере

🔢 Компоненты могут сами загружать данные — проще типизация

🔢 Инкрементальная миграция — можно внедрять постепенно

🔢 Server Functions — формы работают без привязки к роутам

Особенно круто для сложных приложений с CMS-контентом или динамическими комбинациями компонентов — сервер сразу отдаёт нужный UI.

⚠️ Фича пока experimental и может иметь breaking changes в минорных релизах. Для продакшена использовать с осторожностью, но для экспериментов — самое время!

🔗 Подробности на epicreact.dev

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

#read_watch

📎 Шпаргалка для подготовки к React-собеседованию

🔵 30 самых популярных вопросов
🔵 Развёрнутые ответы с примерами кода
🔵 JavaScript, React, Redux, веб-технологии
🔵 Источники и ссылки на документацию

Скачай, изучи, получи оффер 👨‍💻

🔗 Источник

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

#readme #react

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

#pixel_pause

🐧 Тёмная тема в React: простой хук или архитектура

Каждый проект проходит один и тот же путь. Сначала — кнопка переключения темы. Через месяц — система настроек.

Разница в том, что вы выбрали в первый день.

1️⃣ useLocalStorage

Состояние в браузере, API как у useState:

const [theme, setTheme] = useLocalStorage('theme', 'dark')

🔴 Когда подходит:
- Одна настройка
- Прототип или MVP
- Нет планов масштабирования

🔴 Что сломается позже:
- Ключи localStorage расползаются по компонентам
- Нет миграций при смене структуры
- Рассинхронизация состояния между вкладками

Это не баг. Это предел подхода.

2️⃣ zustand + persist

Когда добавляются язык, feature flags, пользовательские настройки — нужен единый стор:

const theme = useSettings(s => s.theme)
const setTheme = useSettings(s => s.setTheme)

🔴 Что получаете:
- Один источник правды
- Селекторы → меньше ререндеров
- Миграции версий состояния из коробки
- Синхронизация между вкладками

🔴 Цена входа:
- +1 зависимость
- 20-30 строк на стор вместо 3 на хук

🔴 Результат:
- Архитектура, которая не разваливается через полгода

❓ Как выбрать:

- 1 настройка →
useLocalStorage

- 2-3 настройки → можно ещё потерпеть

- Система настроек → zustand сразу

localStorage — это инструмент.

zustand — это способ не переписывать проект через полгода.

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

#readme #react

👍👍

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

#pixel_pause

🔄 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