Отревьюй компонент вслух
Вопрос
Отревьюй вслух компонент: он грузит пользователей по query в useEffect без зависимостей, не проверяет r.ok, рендерит список через key={index} и <div onClick>, а имя выводит через dangerouslySetInnerHTML.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Зависимости эффекта: query в массиве зависимостей
Гонка и отмена: AbortController в очистке, проверка r.ok, состояния загрузки и ошибки
key по стабильному id, а не по индексу
Доступность: button вместо div с onClick
XSS: убрать dangerouslySetInnerHTML или санитизировать
Предложить вынести загрузку в TanStack Query и расставить важность замечаний
Что могут спросить следом
- Какие из замечаний блокирующие?
- Как бы ты переписал этот компонент?
Разбор
Начну с блокирующего. Имя через dangerouslySetInnerHTML это XSS, если имя задаёт пользователь, поэтому вывожу обычным текстом в JSX. Дальше корректность: в эффекте нет query в зависимостях, значит, при смене запроса список не обновится. Добавив зависимость, получим гонку, поэтому в очистке отменяю запрос через AbortController. Не проверяется r.ok, и ошибка сервера превратится в попытку распарсить HTML, нужны состояния загрузки и ошибки. Key по индексу ломает состояние строк при изменении порядка, беру user.id. Div с onClick недоступен с клавиатуры и для скринридера, нужна кнопка. И как предложение не блокирующее: загрузку лучше вынести в TanStack Query, там отмена, кеш и состояния уже есть.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.