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

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Альфа-банк

Стек: React

> Пример ответа

Да, логику без useEffect можно и часто нужно реализовывать. Основная идея - перенести побочные эффекты в обработчики событий, вычисляемые значения и синхронные преобразования данных.

1. Обработчики событий (вместо useEffect для реакций на действия пользователя) Вместо:

JSX
useEffect(() => {
  if (submitted) {
    fetch('/api/data', { method: 'POST', body: data });
  }
}, [submitted, data]);

Используйте:

JSX
const handleSubmit = () => {
  fetch('/api/data', { method: 'POST', body: data });
};

2. Вычисляемые значения через useMemo (вместо useEffect для синхронных преобразований) Вместо:

JSX
const [filtered, setFiltered] = useState([]);
useEffect(() => {
  setFiltered(items.filter(item => item.active));
}, [items]);

Используйте:

JSX
const filtered = useMemo(() => items.filter(item => item.active), [items]);

3. Синхронные обновления состояния (вместо useEffect для каскадных изменений) Вместо:

JSX
const [a, setA] = useState(0);
const [b, setB] = useState(0);
useEffect(() => {
  setB(a * 2);
}, [a]);

Используйте:

JSX
const [a, setA] = useState(0);
const b = a * 2; // просто переменная

4. Использование библиотек для управления состоянием (Redux, Zustand, Jotai) Они позволяют описывать логику как чистые функции или саги/эффекты вне компонентов, избегая useEffect в UI-слое.

5. useSyncExternalStore (для подписки на внешние хранилища) Вместо useEffect с подпиской на window или сторонние сервисы.

Итог: useEffect стоит оставлять только для случаев, когда синхронизация с внешней системой (API, DOM, таймеры) не может быть выполнена синхронно или в обработчике.