Frontend-собеседование Middle/Senior с live coding

Коротко о видео

Запись показывает технический этап найма frontend-разработчика в Купибилет. Интервьюеры рассказывают о продукте, стеке и вакансиях, после чего кандидат разбирает свой опыт. Техническая часть охватывает Virtual DOM, ключи React, useId, ререндеры, React.memo и useCallback, замыкания, this, мемоизацию функций, форматы изображений и Git. Есть live coding на поиск лишних ререндеров и реализацию кэширующей функции. После интервью автор отдельно объясняет применение key для сброса Error Boundary и сохранения состояния, а в конце приводит HR-фидбэк: кандидата не выбрали из-за предполагаемой оверквалификации для доступных задач.

Затронутые темы

Что взять на заметку

• Для key в списках используйте стабильный идентификатор из данных: Math.random() создаёт новый ключ на каждом рендере и сбрасывает состояние элемента.
• useId не предназначен для генерации ключей списка; он нужен для согласованных идентификаторов, например в связях доступности.
• Оптимизируйте ререндеры после измерения: React.memo полезен при стабильных props, а для обработчиков может потребоваться useCallback.
• В кэше мемоизированной функции проверяйте наличие ключа, а не истинность результата: 0, false и пустая строка могут быть валидными значениями.
• Сменяйте key вне списка только намеренно: это перемонтирует компонент, что может сбросить Error Boundary, но также сбросит его локальное состояние.