Пот на лбу в тихом сан-франциском коворкинге, удаляю 200 строк Redux-бойлерплейта для простого API-вызова — и приложение словно вздохнуло свободнее.
То, что я перестал делать в React-проектах, перевернуло всё. Не добавлять новые хуки и паттерны. Нет. Вырезать. Без жалости.
Открытие? «Поддерживаемый React-код — это не про следование лучшим практикам. Это про умение вовремя прекратить их использовать.»
Поддерживаемый React-код — это не про следование лучшим практикам. Это про умение вовремя прекратить их использовать.
Хук удался. И чёрт возьми, зацепил.
Почему Redux для серверного состояния меня добивал
Представьте: каждый API-запрос порождает чудовище. Три типа действий. Async thunk. Кейсы редьюсера. Селекторы. useDispatch и useSelector — ад в компонентах. 200+ строк на список кампаний.
Вот ‘до’, прямо из окопов:
// 3 action types, 1 action creator, 1 reducer, 2 selectors...
const FETCH_CAMPAIGNS_REQUEST = "FETCH_CAMPAIGNS_REQUEST";
// ... (понятно)
Подключение? useEffect с диспатчем при смене страницы. Состояния загрузки разбросаны. Ошибки зарыты.
Затем SWR. 15 строк. Один хук. Mutate при обновлениях. Готов к Suspense. Кэш? Автомат. Stale-while-revalidate? Вшит.
const { data: campaigns, error, isLoading } = useSWR('/campaigns?page=' + page);
Плюсы? Логика фетча исчезла из компонентов. Размер бандла минус 15%. Отладка? Не проблема — девтулы SWR всё показывают.
Мой уникальный взгляд: Redux для серверного состояния — эхо jQuery в раннем вебе. Все кололи им любые гвозди, пока fetch() и либы не сказали ‘хватит’. Следующий сдвиг в React? Server Components взорвут большинство клиентских state-машин.
Стоит ли ещё цеплять useEffect?
Цепочки useEffect. По пять на компонент. Один на фетч. Один на optimistic updates. Один на подписки. Cleanup? Кошмары.
Остановил на корню. Заменил на паттерн с одним редьюсером через useReducer + Zustand (миниатюрный, без провайдеров). Или круче: TanStack Query для запросов/мутаций.
Почему? Эффекты не компонуются. Дерутся — stale closures, бесконечные циклы при ошибках в deps. Редьюсер централизует. Один источник истины.
В моей платформе модуль разговоров с 8 эффектов сократился до 2 Query-хуков. Ререндеры вдвое меньше. Race conditions? Исчезли.
Реакт-доки продвигают эффекты как ‘короля сайд-эффектов’, но это мышление 2018-го. Архитектура переходит к запросам как к полноценным объектам.
Короткий абзац. Жёсткая правда.
Prop Drilling: Мёртв с пелёнок
Пропсы на восемь уровней вглубь. UserId из App в тултип Footer. Каждый рефакторинг? Каскад пропсов.
Прикончил. Context? Да, но экономно — только орг-уровень. Компоненты? Хукают из лёгкого стора.
Jotai или Valtio. На атомах. Без контекст-провайдеров повсюду. Подписка точечно.
const userId = useAtom(userAtom);
Многоорг-права? Атом на орг. Масштабируется. Никакого ‘Context hell’.
Кастомные хуки для банальщины
useFetchUser. usePaginateList. useOptimisticUpdate. Колесо заново.
Забил. Либы рулят: React Query/SWR для данных. Framer Motion для анимаций. Headless UI для… headless.
Моя кодовая база? Хуков с 45 до 12. Все боевые. Багов? Почти ноль.
Корпо-хайп: ‘хуки чинят композицию’ от Facebook игнорирует взрыв экосистемы либ — и не зря.
Inline-стили и Emotion-блото
CSS-in-JS вздутие. Emotion-кэши. Бандл раздувается.
Перешёл на Tailwind + CSS-модули. Utility-классы. Ноль рантайма.
Загрузка приложения? На мобиле скорость +40%. С tree-shaking’ом. Теминг? CSS vars.
Почему это важно для React-разработчиков в 2024-м?
React перерастает фазу ‘всё вперёд’. Хуки дали мощь, но плодят овер-инжиниринг. Остановить это? Обрезка для роста.
Метрики моего проекта: строк кода минус 65%. Онбординг новичков? Дни, не недели. Фикс багов в 3 раза быстрее.
Прогноз: К 2025-му React Server Components сделают клиентский стейт реликвией. Инструменты вроде SWR эволюционируют в full-stack фетчеры. Redux? Легаси для редких глобальных синков.
Сомневаетесь? Протестируй
