⚛️ Как я перестал бояться useEffect и упростил код

Сегодня разберём проблему, которую я постоянно вижу в React-проектах - перегруженный useEffect.


Типичная картина:

useEffect(() => {
  fetchData();
  logEvent();
  updateTitle();
}, [user, token, locale, theme]);

❌ Что здесь не так:

🔘эффект делает слишком много
🔘зависимости растут как снежный ком
🔘любое изменение ломает логику
🔘сложно тестировать и дебажить


✅ Что я начал делать вместо этого

1. Один useEffect - одна причина

useEffect(() => {
  fetchData(user, token);
}, [user, token]);

useEffect(() => {
  updateTitle(locale);
}, [locale]);

2. Логику выношу в кастомные хуки

useUserData(user, token);
usePageTitle(locale);

Компонент сразу становится читабельным:

function Profile() {
  useUserData(user, token);
  usePageTitle(locale);

  return <UI />;
}

3. Не боюсь useCallback и useMemo, но использую осознанно

Не для «оптимизации ради оптимизации», а чтобы:

🔘стабилизировать зависимости
🔘убрать лишние перерендеры
🔘сделать поведение предсказуемым

👉@frontend_sovet