> Можно ли реализовать логику без useEffect в React и как? (React)

Короткий ответ

Да, можно. Логику, зависящую от изменений пропсов или состояния, можно реализовать через вычисляемые значения (useMemo), обработчики событий, кастомные хуки с синхронными вычислениями, а также через архитектурные паттерны вроде controlled components или state machines. useEffect стоит использовать только для побочных эффектов, связанных с внешним миром (API, DOM, таймеры, подписки).

Подробное объяснение

useEffect в React часто используется избыточно, особенно junior-разработчиками. Многие сценарии можно реализовать без него:

1. Вычисляемые значения - useMemo или просто переменные в теле компонента. Если новое значение зависит от пропсов или состояния, не нужно ждать рендера и эффекта.

2. Обработчики событий - логика, которая должна выполниться в ответ на действие пользователя (клик, сабмит), помещается непосредственно в обработчик, а не в эффект.

3. Синхронные преобразования данных - фильтрация, сортировка, маппинг массивов выполняются напрямую в render-фазе.

4. Кастомные хуки - инкапсулируют логику и могут использовать useMemo, useCallback, useRef без useEffect.

5. Архитектурные подходы - state machines (XState), controlled components, поднятие состояния, композиция компонентов.

6. useSyncExternalStore - для подписки на внешние сторы без useEffect.

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

На практике

В реальных проектах часто встречается код, где useEffect используется для:

• Обновления стейта на основе других стейтов (можно заменить на useMemo)
• Вызова функций при монтировании (можно заменить на инициализацию в кастомном хуке)
• Логирования изменений (действительно нужен эффект)

Хорошая практика - сначала подумать, можно ли решить задачу без эффекта. Если да - используем синхронные методы. Если нет - пишем эффект с правильными зависимостями и cleanup.

Пример кода

JSX
// ❌ Плохо: useEffect для вычисления производного значения
function UserList({ users, searchTerm }) {
  const [filteredUsers, setFilteredUsers] = useState([]);
  
  useEffect(() => {
    setFilteredUsers(
      users.filter(user => user.name.includes(searchTerm))
    );
  }, [users, searchTerm]);
  
  return <List items={filteredUsers} />;
}

// ✅ Хорошо: вычисляем напрямую
function UserList({ users, searchTerm }) {
  const filteredUsers = useMemo(
    () => users.filter(user => user.name.includes(searchTerm)),
    [users, searchTerm]
  );
  
  return <List items={filteredUsers} />;
}

// ✅ Ещё лучше: без useMemo, если вычисление дешёвое
function UserList({ users, searchTerm }) {
  const filteredUsers = users.filter(user => user.name.includes(searchTerm));
  return <List items={filteredUsers} />;
}

Как отвечать на собеседовании

Начни с чёткого "да, можно". Приведи 2-3 конкретных примера замены useEffect на синхронные подходы. Упомяни useMemo, обработчики событий, кастомные хуки. Объясни, что useEffect нужен только для побочных эффектов с внешним миром. Подчеркни, что избыточное использование эффектов - признак непонимания реактивного потока данных в React. Хорошо бы упомянуть, что в React 19 появится use() для работы с промисами, что ещё больше сократит необходимость в useEffect.

Что проверяет интервьюер

• Понимание жизненного цикла React-компонента и render-фазы
• Умение отличать чистые вычисления от побочных эффектов
• Знание альтернатив useEffect (useMemo, useCallback, кастомные хуки)
• Понимание, когда useEffect действительно необходим
• Способность писать более производительный и предсказуемый код
• Глубину понимания реактивного программирования в React

Типичные ошибки

• Использование useEffect для синхронных вычислений, которые можно сделать в render
• Забывание cleanup в эффектах с подписками
• Создание лишних ререндеров через setState в эффекте
• Попытка заменить абсолютно все эффекты - некоторые действительно нужны (работа с API, таймеры, подписки на внешние события)
• Использование useEffect как костыля для синхронизации стейтов, когда достаточно поднять состояние или использовать useReducer