🔥 Props через 5 уровней — рефакторим через children

➡️ Проблема (1 картинка):

Передаём user через Dashboard и Sidebar, хотя они его не используют. Компоненты становятся «курьерами» для чужих данных.

➡️ Решение (2 картинка):

Используйте композицию через children — передавай данные напрямую туда, где они нужны.

Что это даёт:

🟡 Без prop drilling — данные идут напрямую к UserProfile
🟡 Dashboard и Sidebar становятся переиспользуемыми
🟡 Меньше связности, проще тестировать и поддерживать

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

➕ Композиция — данные нужны только конечному компоненту
➕ Context API — данные нужны многим компонентам на разных уровнях (theme, auth, locale)

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

#hotfix #react

🚀 AbortController — как правильно отменять запросы

➡️ Проблема (1 картинка):

Пользователь быстро переключает вкладки или вводит текст в поиске. Старые запросы продолжают работать и могут перезаписать актуальные данные.

➡️ Решение (2 картинка):

Отменяйте предыдущие запросы через AbortController

Что это даёт:

🟢 Нет race condition — обновляется только последний запрос

🟢 Браузер действительно отменяет запрос на уровне сети

🟢 Код без лишних флагов вроде isCancelled

🟢 Работает с API, которые поддерживают AbortSignal (fetch, Axios ≥0.22, React Query)

Когда применять:

— Автодополнение и live-поиск
— Переключение вкладок и фильтров
— Отмена запросов при размонтировании компонента
— Повторные запросы в useEffect при изменении зависимостей

⚠️ Важные детали:

controller.abort() можно вызывать многократно — это безопасно
Отмена происходит на стороне клиента — запрос может дойти до сервера
После abort() новые запросы с тем же controller не сработают (создавайте новый)

Поддержка:

🟣 Fetch API — нативно
🟣 Axios ≥ 0.22 — через signal
🟣 React Query — через queryFn

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

#hotfix #react

🔥 Next.js 16: Server Components вместо useEffect

➕ Проблема (1 картинка):

'use client' + useEffect + fetch — данные загружаются на клиенте. Медленно, нужны loading states вручную, нет кэша.

➖ Решение (2 картинка):

Server Components — просто async/await в компоненте. Данные на сервере, кэширование через next: { revalidate }.

Что это даёт:

🟢 Быстрее — данные приходят с HTML
🟢 Меньше JS — 0 байт на клиенте для фетчинга
🟢 Умный кэш — revalidate: 60 = обновление раз в минуту
🟢 Проще код — никаких useState/useEffect

Бонус-паттерны:

✅ Параллельный фетчинг:

const [posts, users] = await Promise.all([
  fetch('/api/posts'),
  fetch('/api/users')
])

✅ Server Actions:

export async function createPost(data) {
  'use server'
  await db.posts.create(data)
  revalidatePath('/posts') // Инвалидация кэша
}

✅ Streaming:

<Suspense fallback={<Skeleton />}>
  <Posts />
</Suspense>

⚠️ Fetch больше не кэшируется по умолчанию. Явно указывайте next: { revalidate } или cache: 'force-cache'.

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

#hotfix #react