Какие компоненты браузера нужны в типичном решении и за что они отвечают?

Типичное React-приложение опирается на браузерные API: типичное React-приложение: React рендерит UI, а остальное берётся у платформы.

Хранение

• localStorage / sessionStorage — токены (с оговорками по безопасности), настройки, черновики.
• Cookies — сессии и auth (httpOnly — безопаснее для токенов), SSR-доступ.
• IndexedDB — офлайн-данные, большие объёмы (обычно через idb/Dexie).

Сеть

• fetch / XHR — запросы (обычно за обёрткой axios/ky, поверх — React Query).
• WebSocket / EventSource — realtime; подписка и закрытие в useEffect + cleanup.
• AbortController — отмена запросов (защита от гонок).

Навигация и адрес

• History API (pushState/popstate) — основа React Router; URL/URLSearchParams — состояние в query.

Наблюдатели (обычно через хуки)

• IntersectionObserver — ленивые изображения, бесконечный скролл, «виден ли элемент».
• ResizeObserver — адаптивные компоненты, измерения.
• MutationObserver — интеграция с внешним DOM.

Прочее по задачам

• matchMedia — тема и брейкпоинты; requestAnimationFrame — анимации; Web Workers — тяжёлые вычисления вне главного потока; Notification / Clipboard / File API — UX-фичи; Service Worker — офлайн и кеш (PWA); Performance/Web Vitals — метрики.

Как правильно использовать в React

Обращения к браузерным API — в эффектах/обработчиках (не в рендере), с cleanup (отписки, disconnect, abort); SSR-безопасность — проверка на существование window или доступ только внутри useEffect; удобно оборачивать в кастомные хуки (useLocalStorage, useMediaQuery, useIntersection).

Коротко для собеседования

Типичный набор: storage (local/session/cookies/IndexedDB), сеть (fetch, WebSocket, AbortController), History API + URLSearchParams для роутинга, наблюдатели (Intersection/Resize), matchMedia, rAF, Web Workers, Service Worker. Все вызовы — в эффектах/обработчиках с cleanup и SSR-safe проверками, обёрнутые в кастомные хуки.