Поведение

Когда эффект нужен, а когда достаточно рендера

Отделяем вычисление данных от синхронизации с внешней системой.

Effect нужен для синхронизации с системой за пределами React: например, подпиской на событие или внешним виджетом. Если значение можно вычислить из текущих props и state, обычно достаточно сделать это во время рендера.

const fullName = firstName + ' ' + lastName;
const visible = articles.filter(article =>
  article.title.toLowerCase().includes(query.toLowerCase())
);

Не храните лишнюю копию

Отдельное состояние для fullName и эффект, который его пересчитывает, добавляют лишнее обновление и возможность рассинхронизации. Прямое вычисление показывает связь между входными данными и результатом.

Действие пользователя — в обработчике

Если запрос нужен именно после нажатия «Сохранить», начните его в обработчике этой кнопки. Эффект отвечает на изменение состояния компонента, а обработчик — на конкретное действие человека.

Уборка за подпиской

Для эффекта, который подключает слушатель или внешний ресурс, предусмотрите функцию очистки. Она должна отменять то, что сделала установка. При загрузке данных также учитывайте устаревшие ответы: запросы могут завершаться в другом порядке.

Практика

Найдите в небольшом компоненте эффект, который только фильтрует массив. Замените его вычислением в рендере. Затем отдельно опишите ресурс, для которого вам действительно нужна установка и очистка.