Уберите побочные эффекты из render, не мутируйте props и управляйте жизненным циклом таймера и listener. Внешняя видимость результата не доказывает корректность повторных рендеров и размонтирования.
Какие скрытые ошибки бывают в работающем React-компоненте?
Уберите побочные эффекты из render, не мутируйте props и управляйте жизненным циклом таймера и listener. Внешняя видимость результата не доказывает корректность повторных рендеров и размонтирования.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
Компонент поиска запускает запрос в render, хранит таймер в обычной локальной переменной, сортирует props.items на месте и добавляет window listener без удаления. На коротком ручном просмотре результат выглядит верно. Что исправить?
Ответ
Уберите побочные эффекты из render, не мутируйте props и управляйте жизненным циклом таймера и listener. Внешняя видимость результата не доказывает корректность повторных рендеров и размонтирования.
Запрос запускают в обработчике или эффекте с нужными зависимостями и защитой от устаревшего ответа. Таймер сохраняют в ref и очищают перед заменой и при уходе. Для сортировки копируют массив. Listener регистрируют и снимают одной и той же функцией. После правки отдельно проверяют повторный ввод, повторное монтирование и закрытие компонента, не добавляя мемоизацию поверх логических ошибок.