Руслан Куянец | Reactify on Telegram: “🤯 Подборка сложных вопросов с собеседований 1.…”

🤯 Подборка сложных вопросов с собеседований

1. Какая разница в tree-shaking у CJS и ESM?
ESM (ECMAScript Modules):
- Статический анализ на этапе сборки → можно точно определить неиспользуемый код.
- Импорты (import/export) фиксированы, что позволяет оптимизировать бандл.

CJS (CommonJS):
- Динамические require() → сборщик не может заранее знать, какие части модуля будут использоваться.
- Загружает модуль целиком, что мешает tree-shaking.

2. Какую часть спецификации ES нельзя реализовать через полифиллы и транспиляцию?
Proxy – требует нативной поддержки браузера, так как работает на низком уровне (перехват операций с объектами). Vue 2 для старых браузеров использовал Object.defineProperty вместо Proxy.

3. Для чего используется <picture>, кроме выбора формата изображения?
Адаптивные изображения:
- Разные версии картинки под разные размеры экрана (media-атрибуты).
- Оптимизация под ретину (srcset).
- Fallback для старых браузеров (<img> внутри).
- Разгрузка мобильных сетей (легкие версии).

4. Зачем нужен тег <base>?
Задает базовый URL для всех относительных ссылок на странице.


<base href="https://example.com/assets/">
<img src="logo.png"> <!-- Загрузится https://example.com/assets/logo.png -->

5. Как в runtime проверить поддержку CSS-свойства?

if (CSS.supports('display', 'grid')) {  
  console.log('Grid поддерживается!');  
}

Альтернатива: @supports в CSS.

6. Как называется реактивность в React?
Не настоящая реактивность (как в Svelte/Solid/Vue). React использует "pull-based" модель (перерисовка по изменению состояния). Гранулярная реактивность (сигналы, Proxy) – когда обновляются только зависимые части.

7. Как определить системную тему (dark/light)?
В JS:


const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;  

// Следить за изменением темы  
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {  
  console.log(e.matches ? 'Тёмная тема' : 'Светлая тема');  
});

В CSS:


@media (prefers-color-scheme: dark) {  
  body { background: #000; color: #fff; }  
}

8. Что такое CSS Container Query?
Аналог @media, но зависящий от размера контейнера, а не viewport. Позволяет адаптировать стили для компонентов (например, карточка меняет layout в узком контейнере).


.container { container-type: inline-size; }  

@container (max-width: 500px) {  
  .card { flex-direction: column; }  
}

9. Что будет с padding: 1,5px?
Непредсказуемо! Это синтаксическая ошибка (запятая вместо точки), но браузер попытается "починить". Может интерпретироваться как 1px, 15px или проигнорироваться.

Вывод: так писать нельзя, только padding: 1.5px.

10. Как из массива [1, 2, 3] получить тип 1 | 2 | 3?

const arr = [1, 2, 3] as const;  // Делаем кортеж  
type T = typeof arr[number];     // 1 | 2 | 3

Без as const тип будет number[].

11. Разница между import { ReactNode } и import { type ReactNode }?
Обычный импорт:


import { ReactNode } from 'react';  // Может попасть в бандл.

Импорт типа (TypeScript 4.5+):


import { type ReactNode } from 'react';  // Удаляется при компиляции.

Полезно для оптимизации бандла (импорты только для типов не включаются в JS-код).

#собеседования #react #javascript #typescript