Как исправить гонку загрузки UserProfile в React?

Условие

В UserProfile({userId}) эффект без зависимостей загружает профиль, ответ без проверки записывает user, а ошибки игнорируются. При быстром переключении userId виден прежний пользователь. Предложите конкретные изменения.

Ответ

Добавьте userId в зависимости эффекта, сбрасывайте прежние данные и состояние ошибки при новой загрузке, а старым запросам запрещайте обновлять состояние после cleanup.

Эффект создаёт локальный active=true, запускает загрузку и в cleanup меняет active на false. Успех и ошибка обновляют UI только при active. Дополнительно можно отменять fetch через AbortController, но отмена не заменяет проверку актуальности результата. В разметке отдельно показывают загрузку, отсутствие профиля и ошибку с повтором. Нельзя выводить старые персональные данные как профиль нового userId даже на время ожидания.