Кодик
Начать бесплатно

useEffect не нужен? Плагин ESLint, который делает код чище

Разбираем плагин you-might-not-need-an-effect: зачем он нужен, как помогает избавиться от лишних useEffect в React и писать более чистый, предсказуемый код.

Разработка

6 мин

Привет! Это Кодик — твой гид в мире программирования. Мы не только разбираем новые инструменты, но и делимся лайфхаками в нашем Telegram-канале — заходи, там уже 1500+ разработчиков обсуждают свежие фичи и делятся опытом.

Проблема избыточных useEffect

React давно подарил нам хук useEffect, и он стал универсальным «швейцарским ножом» для сайд-эффектов. Но есть побочка: разработчики часто используют его там, где он совсем не нужен.

👉 В итоге код превращается в кашу: куча подписок, лишние ререндеры, зависимости, которые ломают голову.

👉 А ведь во многих случаях можно обойтись простыми вычислениями или мемоизацией.

Что делает плагин?

Плагин ESLint eslint-plugin-you-might-not-need-an-effect появился как лекарство от привычки «пихать всё в useEffect».

Он анализирует твой код и подсказывает, когда useEffect избыточен. Например:

❌ Лишнее использование useEffect только для вычисления значения → лучше useMemo.

❌ Обновление стейта внутри эффекта без зависимости → привет бесконечный цикл.

❌ Сайд-эффекты, которые можно вынести прямо в рендер или коллбэк.

Примеры правил описаны ниже:

Пример 1: лишний useEffect

// Плохо
useEffect(() => {
  setValue(a + b);
}, [a, b]);

// Хорошо
const value = a + b;

Пример 2: мемоизация вместо эффекта

// Плохо
useEffect(() => {
  const filtered = items.filter(fn);
  setFiltered(filtered);
}, [items, fn]);

// Хорошо
const filtered = useMemo(() => items.filter(fn), [items, fn]);

Чем это помогает?

  1. Код становится чище и предсказуемее.

  2. Меньше лишних ререндеров → выше производительность.

  3. Ты начинаешь лучше понимать, где реально нужен сайд-эффект, а где это «костыль».

useEffect — мощный инструмент, но его переиспользование приводит к хаосу. Плагин you-might-not-need-an-effect помогает «поймать себя за руку» и научиться писать React-компоненты проще.

Попробуй поставить его в свой проект — и увидишь, как код станет чище.

Больше таких разборов в нашем Telegram-канал — там обсуждаем новые плагины, делимся курсами и разбираем свежие тренды в разработке.

Комментарии