Когда эффект лишний
Вопрос
Как ты понимаешь, что useEffect в коде лишний? Приведи примеры, как переписать.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Эффект нужен только для синхронизации с внешней системой
Производные данные считаются в рендере, дорогие через useMemo
Реакция на действие пользователя живёт в обработчике события
Сброс state при смене пропа делается через key
Цепочки эффектов, которые ставят state друг другу, заменяются одним вычислением или обработчиком
Признак: эффект только вызывает setState из props или state
Что могут спросить следом
- Как уведомить родителя об изменении state без эффекта?
- Что делать с загрузкой данных?
- Какой вред от лишнего эффекта для производительности?
Разбор
Главный вопрос: синхронизирую ли я компонент с чем-то вне React. Если нет, эффект, скорее всего, лишний. Типичный случай: эффект берёт props и кладёт результат в state. Это даёт лишний рендер со старыми данными и второй источник правды. Переписываю на вычисление в рендере, при необходимости с useMemo. Второй случай: логика, вызванная кликом или отправкой, вынесена в эффект через флаг. Переношу её в обработчик, тогда не будет повторных срабатываний при перемонтировании. Третий: сброс формы при смене userId. Достаточно дать компоненту key={userId}. Четвёртый: родителя уведомляют эффектом после изменения state. Лучше вызвать onChange в том же обработчике, где меняется state. Остаются настоящие эффекты: подписки, таймеры, интеграция с виджетами, document.title.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.