Зачем прогонять событие через useUnit перед вызовом?

Зачем прогонять событие через useUnit перед вызовом?

Что такое useUnit?

useUnit — это React-хук из Effector, который синхронизирует значение store или выполнение события с жизненным циклом компонента. Это критически важный инструмент для правильной работы реактивного состояния в Effector.

Основные причины использования useUnit

1. Связь события с React-компонентом

Когда вы вызываете событие напрямую без useUnit, этот вызов не привязан к жизненному циклу компонента. Это может привести к утечкам памяти или неожиданному поведению. useUnit гарантирует, что событие работает в контексте конкретного компонента.

// Плохо - событие не привязано к компоненту
function MyComponent() {
  return (
    <button onClick={() => myEvent()}>Клик</button>
  );
}

// Хорошо - useUnit создаёт стабильный reference
function MyComponent() {
  const handleClick = useUnit(myEvent);
  return (
    <button onClick={handleClick}>Клик</button>
  );
}

2. Стабильность ссылок на функции

useUnit возвращает стабильный reference на функцию события. Без него каждый render создаст новую функцию, что может вызвать бесконечные re-renders в компонентах, зависящих от этой функции как dependency.

function Handler() {
  const onClick = useUnit(myEvent);
  // onClick всегда одна и та же ссылка между renders
  
  return <Child onClick={onClick} />; // Не будет бесполезных re-renders
}

3. Синхронизация с Effector scopeом

В SSR сценариях или при использовании fork() в тестах, useUnit гарантирует работу с правильным scope'ом. Без этого событие может вызвать побочные эффекты в неправильном контексте.

// В тестах с fork
const scope = fork();
const handleClick = useUnit(myEvent, { scope });
// Теперь handleClick работает в контексте testScope, не продакшена

4. Отсоединение от zustand/Redux

В отличие от Redux, где просто вызываешь dispatch(action), Effector требует явного подключения компонента к store через useUnit. Это обеспечивает реактивность: компонент перерендерится только при нужных изменениях.

Что происходит без useUnit?

• Событие может быть вызвано в неправильном scope
• Возможны утечки памяти в SSR приложениях
• Теряется отслеживание зависимостей
• Тесты могут вести себя непредсказуемо

Заключение

useUnit — это не просто бойлерплейт, а обязательный шаг для интеграции Effector-событий в React. Это гарантирует, что ваши события работают правильно, тесты проходят, и нет утечек памяти в продакшене.