Summary of "РЕАЛЬНОЕ СОБЕСЕДОВАНИЕ на SENIOR FRONT-END REACT разработчика | ОФФЕР на 400k RUB | Live Coding"

Главная тема

Собеседование / live-coding на позицию Senior Front‑end (React). Кандидат рассказывает о реальном проекте и в режиме интервью решает ряд JavaScript/React задач, объясняя подходы и выводы.

Проект и архитектура

Проект: frontend для онлайн‑регистрации займов (Казахстан). Кандидат выступал как senior и делал архитектуру «с нуля»: выбор технологий, модель получения данных, организация взаимодействия модулей.
Проблема: в компании существовали несколько приложений с одинаковым дизайном, но разной логикой компонентов. Для унификации и поддержки версий была создана приватная библиотека компонентов (частный пакет).
Подход к архитектуре:
- В качестве основы использовался FSD (Feature‑Sliced Design) для модульной организации.
- Обсуждались сложности сильной и слабой связности между модулями.
- Подчёркивалась важность ограничений интерфейсов между модулями и следования принципам FSD, чтобы избежать роста скрытых зависимостей.

Технологический стек

(Исходя из субтитров; автоматическая транскрипция могла исказить названия.)

Основные технологии: React.
Состояние управления состоянием: Redux, MobX (в субтитрах — «redax», «mbx»); в некоторых местах Redux заменяли на Recoil.
Типизация: TypeScript / «typing».
Роутинг: React Router (упоминался «router 5», вероятно react‑router v5 или аналог).
Дополнительно: работа с графиками/визуализацией и частые интеграции с внешними API.

Live‑coding / JavaScript задачи

Рассматривались и объяснялись классические темы, часто встречающиеся на интервью:

Замыкания и поведение конструктора, возвращающего функцию
- Обсуждалось лексическое окружение, что именно возвращается из функции/конструктора и почему при использовании new/return результат может быть объектом или функцией.
- Разбор предсказания вывода в консоль.
Примитивы vs ссылочные типы
- Почему при push одного и того же массива в замыкание в цикле выводятся одинаковые значения.
- Решение: создавать новый массив/копию на каждой итерации (избегать повторного использования ссылочного объекта).
Модель событий (event loop)
- Различие макро‑ и микротасков (setTimeout vs Promise.then).
- Порядок выполнения и анализ последовательности вывода в консоли.
Поведение setTimeout
- Дополнительные аргументы, передаваемые в setTimeout, доступны в callback.
Понятие чистой функции (pure function)
- Критерии: детерминированность по аргументам и отсутствие побочных эффектов.
- Примеры, как переписать функцию, чтобы она стала чистой.

React — код‑ревью и рекомендации

Разбор компонента выявил ошибки и дал практические советы:

Хуки
- Хуки нельзя вызывать условно — их нужно вызывать последовательно в одном порядке при каждом рендере.
- Не определять хуки после условного рендера; объявления нужно выносить до условий.
Асинхронные операции и состояние
- Корректно обрабатывать loading и error (использовать setLoading, setError).
- Использовать finally или другой гарантированный механизм сброса состояния после асинхронного запроса.
useEffect и зависимости
- Указывать корректный массив зависимостей.
- Мемоизировать функции через useCallback, если они используются в зависимостях.
- Всегда возвращать функцию отписки/очистки для подписок (unsubscribe/cleanup).
Обновление состояния
- Если новое состояние зависит от предыдущего — использовать функциональный сеттер: setState(prev => …).
Именования и организация кода
- Избегать одинаковых или неинформативных имён переменных.
- Выносить вычисления и создание параметров внутрь функций, если они используются только там, а не держать их на уровне модуля.

Процесс работы в команде и ожидания

Состав фронтенд‑команды: около 5 разработчиков + тестировщики (есть отдельный фронтенд‑тестинг).
Процесс релизов: не по строгим спринтам; релизы собираются, когда накоплены задачи или есть срочные баги.
Роли при релизе: разработчики обычно не занимаются сборкой релизов, но отвечают за исправления проблем, связанных с их задачами.
Дежурства и сверхурочная работа: редки; компания оплачивает сверхурочные (но не всегда по двойному тарифу).
Испытательный срок (2–3 месяца): ожидается быстрое вливание в контекст, качественное выполнение задач в пределах оценок и снижение числа возвратов в ревью.

Ресурсы, гайды и сообщество

Ведущий/интервьюер упоминает своё сообщество / приватный Telegram‑канал, где доступны:

Гайд по поиску работы в Yandex (примерная оценка зарплаты/оффера — ≈300k RUB).
Записи реальных интервью и предложений (включая T‑Bank и другие), разборы задач live‑coding.
Разборы задач и ранний доступ к видео с YouTube.

Ключевые выводы и практические советы

FSD (feature‑sliced) удобен для крупных проектов с модульной логикой, но важно строго следовать принципам, чтобы не допустить сильной связности.
При написании компонентов и хуков придерживаться правил React: хуки не в условиях, корректные зависимости эффектов, очистка подписок.
На интервью важно проговаривать мыслительный процесс при решении задач: closure, event loop, mutable vs immutable.
Для командной работы критичны тесты, обработка ошибок и корректное управление состоянием и подписками.

Основные участники / упоминания

Алексей — ведущий / интервьюер.
Дмитрий — участник / собеседуемый (рассказывает про проекты; возможный кандидат).
Дополнительные упоминания: Naki, Katya, Yana, Chara (HR / контакт для связи).