Что такое useEffectEvent и зачем он нужен?

Что такое useEffectEvent?

useEffectEvent — это новый хук, представленный в React 19 (ранее известный как useEffectEvent в экспериментальной версии). Он предназначен для решения проблемы, когда внутри useEffect нужно вызвать функцию, которая зависит от внешних значений, но не должна вызывать повторный запуск эффекта при их изменении. Обычно такие функции добавляются в массив зависимостей, что приводит к лишним вызовам эффекта. useEffectEvent позволяет вынести эту функцию из зависимостей, сохраняя доступ к актуальным значениям.

Как это работает?

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

Пример использования

import { useEffect, useEffectEvent } from 'react';

function Chat({ roomId, theme }) {
  const onMessage = useEffectEvent((msg) => {
    console.log(theme, msg); // всегда актуальный theme
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.on('message', onMessage);
    return () => connection.disconnect();
  }, [roomId]); // onMessage не в зависимостях
}

В этом примере onMessage не добавляется в зависимости, но при вызове использует актуальный theme. Если бы мы использовали обычную функцию, пришлось бы добавить её в зависимости, что вызвало бы переподключение при каждом изменении theme.

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

useEffectEvent стоит использовать, когда внутри эффекта вызывается функция, которая зависит от внешних значений, но не должна влиять на перезапуск эффекта. Это улучшает читаемость и производительность, избегая лишних вызовов. Однако хук пока экспериментальный, поэтому в продакшене стоит дождаться стабильной версии или использовать альтернативные подходы, например, useRef для хранения актуальных значений.

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