Когда опенсорс это часть работы

Не так давно наша кодовая база на effector на рабочем проекте стала расти с бОльшей скоростью и, конечно, сильно влиять на легаси код.
Таким образом в огромных компонентах где смешаны бизнес-логика, ui-стейт, выполнение сайд-эффектов, преобразования данных, мемоизация итп, и туда стал проникать useUnit из effector.

useUnit - хук (в случае реакта), который связывает модель со вьюшкой. Если передан стор, то он подписывает компонент на этот стор и обновляет компонент, если стор изменился. Если переданы события или эффекты, то useUnit гарантированно вызовет это событие/эффект в нужной области (scope).

useUnit умеет "батчить" апдейты - если компонент подписан на несколько сторов/событий, то он дождется всех изменений и применит из разом, но только в том случае, если используется один useUnit.

const Component = () => {
  const [user, products] = useUnit([$userStore, $productsStore])
}

Если используется несколько useUnit, то магии не случится, и каждое обновление будет вызывать обновление (ререндер) компонента.

const Component = () => {
  const [products] = useUnit([$productsStore])
  const [user] = useUnit([$userStore])
}

Очевидно – лучше меньше ререндеров, чем больше :)

Но как нам контроллировать количество вызовов этого самого useUnit? Особенно в большой кодовой базе в больших компонентах?

Вариант А – руками.
Ходить по всей кодовой базе, менять самостоятельно вызовы, бить по рукам разработчиков, которые по каким-то причинам не соблюдают такое простое правило.

Вариант Б – заиметь статический анализатор, который укажет на проблему и попробует пофиксить её автоматически.
По этому пути я и пошел - написал правило для eslint-плагина effector'a, которое парсит вызовы useUnit и мержит их, если возможно, или подсвечивает warning с ошибкой, которая сообщает, что лучше так не делать.

Хорошо, множественные useUnit устранили, но что если:
- Мы использовали в компоненте какой-то store, но теперь он нам не нужен. Мы его удалили по месту использования, но забыли удалить из useUnit

const Component = () => {
  // Используем $user, но не используем $products
  const [user] = useUnit([$user, $products]); 

  return <UserCard id={user.id} />
}

В таком случае подписка сохранится - если $products поменяется, то компонент тоже обновится. Неприятно.

Для этого кейса тоже можно написать ESLint-правило!
Парсим вызов useUnit (или его алиасов, если используете), смотрим на то, что было деструктурировано и сравниваем с аргументами, которые передали.
Если аргумент есть, а деструктурированного вызова нет - сообщаем об этом пользователю.

https://github.com/effector/eslint-plugin/pull/175