Эволюция хуков в React: от `useEffect` к data-first архитектуре

С момента появления хуков в React прошло семь лет. Несмотря на это, во многих проектах сохраняется одинаковый подход: useState для состояния, useEffect для всего остального, и шаблонное копирование готовых решений.

Хуки изначально задумывались не просто как замена методов жизненного цикла классов, а как система композиции логики, позволяющая создавать более выразительные и модульные архитектуры.

Введение конкурентного режима, начиная с React 18, изменило парадигму обработки данных, особенно асинхронных операций. Теперь доступны серверные компоненты, хук use(), серверные экшены, загрузка данных на основе фреймворка... и даже определённые асинхронные возможности внутри клиентских компонентов в зависимости от настройки.

В статье проанализируем современные паттерны работы с хуками, эволюцию React в сторону data-first подходов и сложности, с которыми сталкивается сообщество при переходе на новые практики.

Злоупотребление useEffect: симптомы и последствия

useEffect часто применяется для решения задач, выходящих за рамки его предназначения, превращаясь в универсальный контейнер для разнородной логики, которая не должна там находиться, например, для извлечения данных, производных значений и даже простых преобразований состояния. Именно в этот момент компоненты становятся нестабильными: перезапускаются в неподходящее время или чаще, чем должны.

useEffect(() => {
  fetchData();
}, [query]); // Побочный эффект (сетевой запрос) выполняется при каждом изменении query, что может быть избыточным.

Большая часть этой проблемы связана с смешением производного состояния и побочных эффектов, которые React обрабатывает по-разному.

Использование эффектов, как предполагает React

Правило React удивительно простое: Используйте эффекты только для реальных побочных эффектов, вещей, затрагивающих внешний мир.

Остальное должно быть получено во время рендеринга.

const filteredData = useMemo(() => {
  return data.filter(item => item.includes(query));
}, [data, query]);

Когда нужен эффект, useEffectEvent из React — ваш друг. Он позволяет получить доступ к последним пропсам/состояниям внутри эффекта, не раздувая массив зависимостей.

const handleSave = useEffectEvent(async () => {
  await saveToServer(formData);
});

Перед использованием useEffect проверьте: если логика связана с внешним миром (сеть, DOM, подписки) — это допустимо. Если же данные можно вычислить во время рендеринга — используйте useMemo, useCallback или примитивы, предоставляемые фреймворком.

Пользовательские хуки: от повторного использования к инкапсуляции логики

Пользовательские хуки нужны не только для уменьшения дублирования. Они нужны для выделения доменной логики из компонентов, чтобы UI оставался сосредоточенным на UI.

Например, взамен загромождения компонентов кодом настройки, таким как:

useEffect(() => {
  const listener = () => setWidth(window.innerWidth);
  window.addEventListener('resize', listener);
  return () => window.removeEventListener('resize', listener);
}, []);

Это можно перенести в хук:

function useWindowWidth() {
  const [width, setWidth] = useState(
    typeof window !== 'undefined' ? window.innerWidth : 0
  );

  useEffect(() => {
    const listener = () => setWidth(window.innerWidth);
    window.addEventListener('resize', listener);
    return () => window.removeEventListener('resize', listener);
  }, []);

  return width;
}

Это делает код чище, повышает его тестируемость, а компоненты перестают раскрывать детали реализации.

Состояние на основе подписки с useSyncExternalStore

В React 18 стабилизирован хук useSyncExternalStore , ранее существовавший в экспериментальном статусе. Он системно решает целый класс ошибок, связанных с подписками, разрывами и высокочастотными обновлениями.

Если вы когда-либо сталкивались с проблемами matchMedia, позиционированием прокрутки или сторонних хранилищ, работающих нестабильно при рендеринге, то этот API React — именно то, что вам нужно.

Используйте его для:

• API браузера (matchMedia, видимость страницы, положение прокрутки).
• Внешних хранилищ (Redux, Zustand, пользовательские системы подписки).
• Всего, что чувствительно к производительности или управляется событиями.

function useMediaQuery(query) {
  return useSyncExternalStore(
    (callback) => {
      const mql = window.matchMedia(query);
      mql.addEventListener('change', callback);
      return () => mql.removeEventListener('change', callback);
    },
    () => window.matchMedia(query).matches,
    () => false // резервное значение SSR
  );
}

Более плавный UI с переходами и отложенными значениями

Если приложение работает медленно, когда пользователи вводят текст или применяют фильтры, могут помочь инструменты React для параллельной обработки. Эти инструменты помогают React разделять обновления на срочные (например, ввод текста) и отложенные (ресурсоёмкие вычисления), повышая отзывчивость интерфейса.

const [searchTerm, setSearchTerm] = useState('');
const deferredSearchTerm = useDeferredValue(searchTerm);

const filtered = useMemo(() => {
  return data.filter(item => item.includes(deferredSearchTerm));
}, [data, deferredSearchTerm]);

Набор текста остаётся отзывчивым, а тяжёлая работа по фильтрации откладывается на потом.

Быстрая ментальная модель:

• startTransition(() => setState()) → откладывает обновления состояния
• useDeferredValue(value) → откладывает выведенные значения

Используйте их вместе, когда это необходимо, но не переусердствуйте. Они не предназначены для тривиальных вычислений.

Тестируемые и отлаживаемые хуки

Современные инструменты React DevTools позволяют с лёгкостью проверять пользовательские хуки. А если вы правильно структурируете хуки, большая часть логики становится тестируемой без рендеринга фактических компонентов.

• Разделяйте доменную логику и логику представления (UI).
• По возможности тестируйте хуки напрямую.
• Для ясности вынесите логику провайдера в отдельный хук.

function useAuthProvider() {
  const [user, setUser] = useState(null);
  const login = async (credentials) => { /* ... */ };
  const logout = () => { /* ... */ };
  return { user, login, logout };
}

const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const value = useAuthProvider();
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

export function useAuth() {
  return useContext(AuthContext);
}

Такой подход не только облегчает отладку в DevTools, но и позволяет писать модульные тесты для useAuthProvider в полной изоляции от React-компонентов.

За пределами хуков: к data-first React-приложениям

Вместо ручного управления данными через эффекты, React предлагает набор API, которые позволяют декларативно описывать потоки данных. Рассмотрим ключевые из них:

• use() для асинхронных ресурсов во время рендеринга (в основном серверные компоненты; ограниченная поддержка клиентских компонентов через серверные экшены)
• useEffectEvent для стабильных обратных вызовов эффектов
• useActionState для асинхронного состояния, похожего на workflow
• Кэширование на уровне фреймворка и примитивы данных
• Улучшенные инструменты для параллельного рендеринга и DevTools

На практике это означает смещение фокуса с ручного управления жизненным циклом данных в эффектах на декларативную их подпитку в компонентах. Вместо useEffect(() => { fetch(url).then(setData) }, [url]) в клиентском компоненте, данные поступают в компонент как пропс, декларативно описанный на сервере.

Направление ясно: React хочет, чтобы меньше полагались на использование useEffect как универсального решения для любых задач и больше — на чистые потоки данных, управляемые рендерингом.

Разработка хуков на основе производного состояния и границ сервера/клиента делает приложение интуитивно готовым к будущему.

Хуки как архитектура, а не синтаксис

Хуки — это не просто более удобный API, чем классы, это архитектурный паттерн.

• Сохраняйте производные состояния в рендере.
• Используйте эффекты только для фактических побочных эффектов.
• Выстраивайте логику с помощью небольших, целенаправленных хуков.
• Позвольте инструментам параллелизма сглаживать асинхронные потоки.
• Думайте как о клиенте, так и о сервере.

React развивается. Хуки должны развиваться вместе с ним.

Подходы к работе с хуками, актуальные в 2020 году, до сих пор встречаются во многих проектах. Однако React 18+ предоставляет более совершенные инструменты для построения производительных и масштабируемых приложений. Освоение современных паттернов позволяет сократить количество ошибок и упростить долгосрочную поддержку кода.