🔥 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