Frontend-собеседование: React, event loop и code review

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

Это запись технического этапа собеседования на frontend-разработчика в WB (Wildberries). После рекламного вступления интервьюер проверяет понимание загрузки страницы: DNS, TCP/TLS, HTTP-кеширования, CORS, рендера и загрузки CSS/JavaScript. Затем кандидат обсуждает React Lazy и динамические импорты, решает задачи на поиск пары чисел, обход дерева, порядок Event Loop и generic-типизацию аналога map. В code review он комментирует React-ключи, useMemo/useCallback, useEffect, обновление состояния и обработчик удаления; интервьюер уточняет и исправляет ряд его рассуждений. В финале сообщается о положительном фидбеке и приглашении на этап с командой.

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

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

• Code splitting с динамическим import позволяет загружать код по требованию; React.lazy вместе с Suspense показывает fallback, пока впервые отрендеренный ленивый компонент догружается.
• После завершения текущей задачи движок выполняет очередь микрозадач до опустошения перед следующей задачей; бесконечная цепочка микрозадач способна заблокировать интерфейс.
• Стабильный уникальный key нужен React для правильного сопоставления элементов списка при добавлении, удалении и перестановке.
• useMemo и useCallback не стоит применять автоматически: они полезны, когда стоимость вычисления или стабильность ссылки действительно влияет на мемоизированного потомка либо зависимости хука.
• Действие, вызванное кликом пользователя, обычно выполняют в обработчике события. useEffect нужен для синхронизации с внешними системами в жизненном цикле компонента, а его cleanup — для отмены таймеров, подписок и других ресурсов.