Вопросы на собеседовании: Frontend (React)

Программа курса

1. 1 JavaScript под капотом

   1. Event loop: что выведет код

      Порядок вывода setTimeout, Promise и синхронного кода. Макро- и микрозадачи, почему setTimeout(0) не значит «сразу». Разбор классического вопроса с собеседования.

   2. Замыкания и цикл

      Почему var в цикле с setTimeout печатает 3, 3, 3, как это чинит let, что именно захватывает замыкание и зачем это нужно на практике — включая stale closure в React.

   3. this, call/apply/bind и стрелки

      Чему равен this при разных способах вызова, почему у стрелочной функции нет своего this и как теряется контекст при передаче метода в колбэк. Разбор с живым кодом.

2. 2 React: рендеринг

   1. Реконсиляция и Virtual DOM

      Что такое Virtual DOM и реконсиляция в React, как React сравнивает деревья элементов и почему смена типа элемента размонтирует всё поддерево вместе с состоянием.

   2. Зачем нужен key (и почему не индекс)

      Почему key={index} в React ломает списки: разбор бага с полями ввода при удалении элемента из середины, как key влияет на переиспользование состояния и когда индекс допустим.

   3. Почему компонент лишний раз рендерится

      Лишние ререндеры в React: ререндер родителя тянет детей, новая ссылка на объект или функцию ломает memo, ререндер не равен обновлению DOM — и как всё это диагностировать.

3. 3 Хуки и их ловушки

   1. useState: батчинг и функциональное обновление

      Почему два setCount(count + 1) подряд увеличивают счётчик на 1, а не на 2: батчинг, состояние как снимок и функциональное обновление setCount(prev => prev + 1).

   2. useEffect: зависимости и очистка

      useEffect на собеседовании: массив зависимостей и что будет без него, бесконечный цикл эффекта, функция очистки, гонка запросов и двойной вызов в StrictMode.

   3. useMemo, useCallback и React.memo

      Зачем useCallback, если у ребёнка нет React.memo? Разбираем, что реально делают useMemo, useCallback и memo, когда они бесполезны и во что обходится мемоизация.

4. 4 Состояние и данные

   1. Подъём состояния и prop drilling

      Где хранить состояние в React, что такое prop drilling, как Context решает проблему и почему за него приходится платить ререндером всех потребителей.

   2. Контролируемые и неконтролируемые компоненты

      Почему input с value без onChange не даёт печатать, чем контролируемая форма отличается от формы на ref, когда что выбирать и как React управляет значением поля.

   3. Загрузка данных и гонки запросов

      Классический баг useEffect + fetch: медленный ответ перезаписывает свежий. Разбираем гонку запросов, отмену через AbortController и зачем нужны библиотеки данных.

5. 5 Браузер, вёрстка, сеть

   1. CSS: специфичность, flex и позиционирование

      Разбор классических вопросов по CSS на собеседовании: каскад и специфичность селекторов, flex против grid, почему position: absolute ломает вёрстку, box-sizing.

   2. HTTP, CORS и кеширование

      Собеседование по сети: коды ответов HTTP, что такое CORS и почему ошибка видна фронтенду, а чинится на бэкенде, preflight-запрос OPTIONS, ETag и заголовки кеширования.

   3. Оптимизация фронтенда на собеседовании

      Как отвечать на вопрос о производительности фронтенда: измерения и Web Vitals, размер бандла и code splitting, ленивая загрузка, виртуализация списков, изображения.