React для Angular-разработчика #

React не заменяет Angular в этой подборке. Это соседняя модель UI, которую полезно понимать frontend-разработчику, особенно если на интервью обсуждают не только Angular, но и архитектуру интерфейсов в целом.

• React часто встречается в вакансиях и смежных командах.
• Даже если разработчик работает на Angular, полезно понимать другую модель UI и другой набор trade-offs.
• React помогает лучше понять state updates, immutability, controlled components и render как функцию от состояния.
• На архитектурных интервью могут спрашивать сравнение Angular и React.
• В enterprise-командах могут быть micro frontends, где часть приложений написана на Angular, а часть на React.
• Знание React помогает обсуждать trade-offs без фанатизма.

React component - это функция, которая возвращает JSX и описывает часть UI. Компонент получает входные данные через props и может хранить локальное состояние через hooks.

type TripCardProps = {
  title: string;
  country: string;
};

export function TripCard({title, country}: TripCardProps) {
  return (
    <article>
      <h3>{title}</h3>
      <p>{country}</p>
    </article>
  );
}

JSX - это синтаксис, похожий на HTML внутри JavaScript или TypeScript. Он компилируется в вызовы React и позволяет описывать UI рядом с логикой компонента.

Props - это входные данные компонента, практический аналог @Input() в Angular. Child component не должен менять props, потому что они принадлежат parent component.

Parent передает функцию через callback prop, а child вызывает ее в нужный момент. Это похоже на @Output(), но без EventEmitter.

type AddTripFormProps = {
  onAddTrip: (title: string) => void;
};

Обычно через array.map(). Для каждого элемента нужен стабильный key, чтобы React корректно сопоставлял элементы между render-ами.

{
  trips.map((trip) => (
    <TripCard
      key={trip.id}
      title={trip.title}
      country={trip.country}
    />
  ));
}

key помогает React сопоставлять элементы между render-ами во время reconciliation. По смыслу это похоже на trackBy: ключ нужен не для красоты, а для сохранения identity элемента.

State - это данные компонента, изменение которых вызывает новый render. В function components state обычно создают через useState.

const [count, setCount] = useState(0);

Props приходят снаружи и принадлежат parent component. State принадлежит самому компоненту. Если данные должен менять child, обычно parent передает callback.

Render - это вычисление UI для текущих props и state. Важно думать о render как о чистом описании: при одних и тех же входных данных компонент должен вернуть один и тот же UI.

Во время render-а значение state фиксировано. Если внутри одного обработчика написать несколько обновлений на основе переменной count, все они видят один и тот же snapshot.

const [count, setCount] = useState(0);

setCount(count + 1);
setCount(count + 1);
setCount(count + 1);

Если count был 0, результат может быть 1, а не 3: каждое обновление ставит значение 1, потому что читает тот же snapshot count.

Когда новое состояние зависит от предыдущего. Updater получает актуальное промежуточное значение, поэтому серия обновлений работает предсказуемо.

setCount((current) => current + 1);
setCount((current) => current + 1);
setCount((current) => current + 1);

Такой код увеличит счетчик на 3, потому что каждый updater применяется к результату предыдущего updater-а.

React может группировать несколько state updates в один render, чтобы не перерисовывать UI после каждого setter-а. Batching не означает, что state мутируется сразу. Setter планирует обновление, а компонент получает новое значение на следующем render-е.

count++ меняет локальную переменную из текущего render snapshot, но не сообщает React о новом состоянии. React не узнает, что нужно сделать render. Состояние нужно обновлять через setter.

Прямая мутация меняет объект или массив на месте, но React сравнивает ссылки и планирует render через setter. Поэтому массивы и объекты в state обновляют иммутабельно.

setTrips((current) => [...current, newTrip]);

В Angular signals похожая идея: лучше обновлять значение через set / update и возвращать новую ссылку для объектов и массивов. В React роль явного входа в обновление выполняет setter из useState.

filter возвращает новый массив и не меняет исходный state.

const visibleTrips = trips.filter((trip) => trip.country.toLowerCase().includes(query.toLowerCase()));

Hook - это функция React, которая позволяет component или custom hook использовать state, effects, context и другие возможности React. Hooks вызывают только на верхнем уровне component или другого hook.

useEffect запускает side effect после render-а: подписку, запрос, синхронизацию с внешней системой, работу с DOM API. Он не нужен для обычных вычислений, которые можно сделать во время render-а.

Custom hook - это функция, которая выносит reusable stateful logic из компонентов. Это не сервис Angular один к одному: hook живет в React-дереве и подчиняется правилам hooks.

function useTrips() {
  const [trips, setTrips] = useState<Trip[]>([]);

  return {
    trips,
    setTrips,
  };
}

Похож тем, что часто запускается один раз после первого render-а. Не похож тем, что useEffect завязан на render и dependency array, а не на class lifecycle. В React многие вещи, которые Angular-разработчик положил бы в ngOnInit, лучше вычислить прямо в render или вынести в hook.

Через AbortController и cleanup function.

useEffect(() => {
  const controller = new AbortController();

  fetch('/api/trips', {signal: controller.signal});

  return () => controller.abort();
}, []);

Controlled input - это input, значение которого хранится в React state и обновляется через onChange.

const [title, setTitle] = useState('');

<input
  value={title}
  onChange={(event) => setTitle(event.target.value)}
/>;

В Angular Reactive Forms есть отдельная модель формы: FormControl, FormGroup, validators, status, touched, dirty. В React controlled form часто начинается с обычного state и обработчиков. Для сложных форм обычно берут React Hook Form или другую form library.

• Делать каждый field controlled без причины в большой форме и получать лишнюю сложность.
• Мутировать объект формы напрямую.
• Держать validation rules вперемешку с разметкой, когда форма уже стала сложной.
• Не различать submit state, validation state и server error.

Для маленького примера достаточно useEffect + fetch. В приложении с cache, refetch, retry и синхронизацией server state чаще используют TanStack Query или похожую библиотеку.

Server state приходит с сервера, может устаревать, требует cache, refetch и обработки loading/error. Client state принадлежит UI: открытая панель, текущий фильтр, выбранная вкладка, локальный draft.

Рядом с источником данных. Если запрос локальный для страницы, можно держать state в hook страницы. Если данные переиспользуются, лучше вынести загрузку в custom hook или query layer.

Angular Router - часть Angular platform, он тесно связан с DI, guards, resolvers и lazy loading. React Router - отдельная библиотека для client-side routing. Ее выбирают и настраивают отдельно от React.

createBrowserRouter([
  {path: '/trips', element: <TripsPage />},
  {path: '/trips/new', element: <NewTripPage />},
  {path: '/trips/:tripId', element: <TripDetailsPage />},
]);

Context нужен, когда значение нужно передать глубоко по дереву без prop drilling: theme, locale, текущий пользователь, настройки приложения. Это ближе к scoped provider, чем к полноценному store.

Context решает передачу значения, но не дает из коробки нормализованную модель данных, devtools, middleware, cache, optimistic updates или granular subscriptions. Для сложного client state чаще смотрят на Redux Toolkit или Zustand, а для server state - на TanStack Query.

Angular DI создает и резолвит зависимости по injector tree, умеет работать с class services, tokens и providers. React Context передает value через component tree. В Context можно положить service-like object, но lifecycle и границы будут React-овыми.

Обе механики передают данные сверху вниз. В Angular @Input() является частью component metadata и change detection контракта. В React props - обычный объект аргументов component function.

В React это чаще function + JSX + hooks. В Angular - class + metadata + template + DI. React component обычно ближе к функции отображения, а Angular component встроен в более широкий framework lifecycle.

@Output() обычно основан на EventEmitter или output API Angular. В React parent передает функцию, child вызывает ее. Это проще механически, но требует дисциплины в именовании и направлении data flow.

Lifecycle hooks Angular привязаны к lifecycle class component/directive. useEffect описывает синхронизацию с внешним миром после render-а и повторяется при изменении dependencies. Он не является полным аналогом ngOnInit.

React должен получить новое значение через setter, чтобы запланировать render. При мутации на месте ссылка может остаться той же, а UI и memoization начнут вести себя непредсказуемо.

Если переносить Angular-привычки напрямую, можно получить лишние service abstractions, неуместный Context, effects для обычных вычислений и тяжелые формы без нужды. Лучше принять React-модель: props down, callbacks up, immutable state, hooks для reusable UI logic.

React чаще называют library для UI layer. Он помогает описывать component tree и rendering, но routing, forms, HTTP, state management и project architecture выбираются отдельно. Angular дает больше решений из коробки: router, forms, DI, HTTP integration, CLI conventions.

Context передает конкретное значение через React tree. Angular DI резолвит зависимости через injectors и tokens. DI лучше подходит для сервисов и инфраструктурных зависимостей, Context - для значений, связанных с UI-деревом.

React не дает встроенной формы уровня Angular Reactive Forms. Можно собрать controlled inputs на state, использовать uncontrolled inputs или взять библиотеку. В Angular Reactive Forms модель формы является частью framework API.

React Router - отдельный выбор стека. Angular Router - официальный router с guards, resolvers, DI и lazy loading как частью Angular architecture.

React state обновляется setter-ом и вызывает render component subtree. Angular signals хранят reactive value и точнее связывают чтения с зависимостями. В обоих случаях важно не мутировать объекты незаметно.

React намеренно покрывает меньше слоев. Команда сама выбирает router, data fetching, forms, state manager, styling и SSR framework. Это гибко, но требует явных соглашений.

React сам по себе закрывает UI layer, поэтому вокруг него команда выбирает router, data fetching, forms, styling, testing, auth, hosting и иногда fullstack framework. Это не список библиотек для заучивания. На интервью важнее объяснить, какие требования продукта влияют на выбор и чем этот подход отличается от Angular platform.

Angular - framework с большим количеством официальных решений: router, forms, DI, HTTP integration, CLI conventions. React чаще является UI library, вокруг которой команда собирает стек. Поэтому в React-интервью часто спрашивают не только React Core, но и routing, server state, forms, styling, testing, SSR, auth и hosting.

Angular дает официальный router, forms API, DI, HttpClient, CLI, application builder и opinionated project structure. В React обычно отдельно выбирают React Router или framework router, TanStack Query или другой data layer, form library, styling strategy, test stack и deployment model.

Плюс в том, что можно подобрать стек под продукт: SPA, content site, dashboard, fullstack app или mobile. Минус в том, что команда должна принимать больше архитектурных решений и поддерживать их consistency. Без соглашений React-проект быстро превращается в набор локальных предпочтений.

Начните с требований: SPA или SSR, SEO, сложность форм, объем server state, дизайн-система, уровень команды, monorepo, deployment target, accessibility и testing. Хороший ответ не называет одну любимую библиотеку, а показывает критерии выбора и trade-offs.

Даже без перехода на React это помогает обсуждать micro frontends, shared design systems, hiring, architecture reviews и frontend platform decisions. Angular-разработчику важно понимать, где Angular дает встроенный контракт, а где React команда создает контракт сама.

Когда нужен быстрый SPA-проект: админка, внутренний интерфейс, кабинет, прототип или учебный проект. Vite дает простой dev server и build setup, но не решает SSR, file-based routing и backend-задачи сам по себе.

Next.js подходит, когда важны SSR, SSG, SEO, file-based routing, server-side data fetching или fullstack-подход в одном репозитории. В отличие от Vite SPA, это framework вокруг React со своими routing, cache и deployment trade-offs.

Vite SPA обычно рендерит приложение на клиенте и требует отдельного решения для routing/data/backend. Next.js добавляет server rendering, file-based routing, server components и server functions. Это больше возможностей, но и больше framework-specific правил.

Astro уместен для content-heavy и static сайтов, где важно доставлять минимум JavaScript. React-компоненты можно использовать точечно как islands, но приложение не обязано становиться полноценной React SPA.

Next.js добавляет routing, server rendering, cache и fullstack conventions, но компоненты, props, state, hooks, events, keys и composition остаются React. Без React fundamentals разработчик будет путать framework-specific правила с базовой моделью UI.

TanStack Start - fullstack framework из TanStack ecosystem вокруг TanStack Router. Его обычно рассматривают, когда команде важны type-safe routing, loaders и интеграция с TanStack Query без перехода в Next.js-модель.

В library mode React Router - это router для client-side navigation внутри приложения. В framework mode он становится ближе к application framework: появляются file routes, loaders, actions, server rendering и conventions вокруг данных.

npm - самый стандартный и предсказуемый выбор. pnpm часто выбирают за скорость, строгую модель зависимостей и экономию места. Bun - более широкий toolchain, но перед выбором нужно оценить зрелость, совместимость и CI/deployment.

Когда проект небольшой, команда не упирается в скорость install, нет сложного monorepo и важна максимальная предсказуемость окружения. Для интервью это нормальный boring default, а не признак слабого стека.

pnpm хорош для monorepo, больших dependency trees и команд, где важны быстрые install и строгая проверка неявных зависимостей. Angular-разработчику это обычно понятно через workspace-мышление и shared tooling.

Когда несколько приложений и библиотек должны вместе версионироваться, переиспользовать design tokens, shared UI, domain logic или tooling. Если в репозитории один маленький app, monorepo может добавить лишнюю сложность.

Turborepo чаще воспринимается как task pipeline и cache для JS/TS monorepo. Nx - более полноценная monorepo platform с project graph, generators, affected commands и сильной историей в Angular. Поэтому Angular-разработчику часто проще понять Nx в mixed Angular + React workspace.

Риски: медленный CI без affected/cache, неясные boundaries, случайные зависимости между features, сложный ownership и обновления tooling. Monorepo полезен только тогда, когда команда реально поддерживает правила архитектуры.

Это навигация, где URL меняется без полной перезагрузки страницы, а React перерисовывает нужный route на клиенте. Для SPA это привычная модель, но SEO, initial load и data fetching нужно продумывать отдельно.

Это подход, где структура файлов определяет routes. Он привычен в Next.js и некоторых fullstack/framework режимах: меньше ручной конфигурации, но больше зависимости от conventions конкретного framework.

Loader загружает данные для route, action обрабатывает mutation или form submission. Это похоже на route-level contract: данные и навигация проектируются вместе, а не размазываются по useEffect в компонентах.

React Server Components позволяют части component tree выполняться на сервере и не попадать в client bundle. Это мощно для data fetching и bundle size, но требует понимать границы server/client code, cache, serialization и ограничения framework-а.

Риски: новая mental model, путаница server/client boundaries, framework lock-in, сложнее debugging и миграции. Перед выбором важно понять, есть ли реальные требования к SSR, SEO, cache и bundle size.

Angular Router - официальный router framework-а с DI, guards, resolvers и lazy loading. React Router - отдельная библиотека или framework mode, которую команда подключает и настраивает отдельно от React Core.

SSR рендерит HTML на сервере, чтобы пользователь и поисковик раньше получили содержимое. Hydration подключает React на клиенте к уже полученному HTML. Риски начинаются, когда server HTML и первый client render не совпадают.

Нужны ли SSR/SSG, SEO, route-level data loading, type-safe routes, server functions, file-based routing и какой deployment target. Если нужен только client-side routing, framework может быть лишним; если нужен fullstack rendering, обычной router library может не хватить.

Когда состояние локально для одного компонента или небольшой ветки: открыта модалка, выбран tab, текст input. Если state не нужен другим distant features, не стоит сразу добавлять global store.

Когда обновления связаны правилами и transitions становятся важнее отдельных setters: wizard, сложный фильтр, локальная state machine. Это не замена Redux, а способ сделать локальные изменения предсказуемее.

Redux Toolkit подходит для сложного shared client state, strict conventions и devtools. Zustand проще для небольшого shared state. Jotai может быть удобен для atom-based модели. XState стоит брать, когда домен естественно описывается состояниями и переходами.

URL state можно шарить ссылкой, восстанавливать после reload и использовать в browser history. Для React есть обычные query params и специализированные helpers вроде nuqs; в Angular похожая идея живет в Router query params.

В Angular shared state часто живет в injectable services и опирается на RxJS или signals. В React shared state обычно собирается из hooks, Context, store libraries и query layer. Главное в обоих мирах - разделять local UI state, server state, URL state и domain transitions.

Server state принадлежит серверу, может устаревать, требует cache, refetch, retry, invalidation и обработки concurrent updates. Это не то же самое, что global client state вроде открытого sidebar или выбранной темы.

Для маленького учебного примера или одноразового запроса без cache, retry, invalidation и shared ownership. В продукте эта схема быстро обрастает ручной логикой loading/error/refetch и начинает дублироваться.

RTK Query логичен, если команда уже использует Redux Toolkit и хочет держать API layer рядом с Redux conventions. Если Redux в проекте не нужен, TanStack Query часто будет проще как отдельный server-state layer.

Это GraphQL-клиенты. Apollo часто выбирают за ecosystem и привычный DX, urql - за более легкий и модульный подход, Relay - за строгую модель data requirements и масштабирование больших GraphQL-приложений.

TanStack Query управляет server state: loading/error, cache, refetch, invalidation, retries, pagination и optimistic updates. Это не replacement для Redux Toolkit, потому что Redux Toolkit обычно отвечает за client state и business flow.

В Angular запросы часто оформляют в services на HttpClient, а orchestration делают через RxJS или signals. В React нет встроенного HttpClient, поэтому команда выбирает fetch, axios, query library, GraphQL client, tRPC или server functions.

Controlled input хранит значение в React state и обновляет его через onChange. Uncontrolled input хранит значение в DOM и читается через ref или form submit. Junior должен понимать controlled input, но в больших формах не всегда нужно контролировать каждый символ вручную.

Появляется много boilerplate: touched/dirty, validation, nested fields, arrays, server errors, submit state и accessibility. Form library помогает держать эти состояния явно и не смешивать validation с JSX.

React Hook Form упрощает регистрацию полей, validation, errors и submit flow, часто с меньшим количеством re-render-ов. Его часто комбинируют с Zod, чтобы одна schema описывала форму и типы.

TanStack Form интересен, когда нужна строгая typed form model и хороший field-level API. Conform полезен в server-first подходах, где form submission и validation тесно связаны с route actions или server actions.

Angular Reactive Forms дают официальную модель FormControl, FormGroup, validators и statuses. React не имеет такого встроенного слоя, поэтому команда выбирает между ручным state, uncontrolled-подходом и form libraries.

Runtime CSS-in-JS генерирует стили во время выполнения приложения. В современных SSR/RSC-приложениях это может добавить runtime cost, усложнить streaming/rendering и создать интеграционные ограничения. Поэтому CSS Modules, Tailwind и build-time варианты часто проще.

Обычный CSS, CSS Modules, Tailwind, build-time CSS-in-JS, runtime CSS-in-JS, design tokens и готовые UI libraries. Это общие frontend-решения, не только React-темы; React лишь задает способ привязать их к component tree.

Plain CSS подходит для небольших проектов и глобальных слоев. CSS Modules дают локальный scope классов без runtime cost и хорошо работают в долгоживущих продуктах, где не нужен тяжелый styling framework.

Tailwind ускоряет сборку UI, хорошо сочетается с headless libraries и уменьшает переключение между JSX и CSS-файлами. Минус - риск шумной разметки и необходимость дисциплины в design tokens и component boundaries.

Component library вроде MUI, Ant Design, Mantine или PrimeReact дает готовый внешний вид и поведение. Headless/primitives подход вроде Radix, Base UI, React Aria, Ark UI, Ariakit или Headless UI дает accessibility и state behavior, но внешний вид команда строит сама.

Library может помочь с keyboard behavior и ARIA patterns, но не знает ваш контент, labels, error messages, focus flow и product context. Как и в Angular, ответственность за итоговую доступность остается у команды.

Для hover/focus, простых transitions, skeletons и небольших enter/exit effects лучше начать с CSS. Animation library нужна, когда есть сложные timelines, gestures, physics или координация нескольких элементов.

Motion хорошо ложится на React components и declarative UI transitions. GSAP сильнее в сложных timeline-анимациях, скролл-сценариях и production motion design, но требует аккуратной интеграции с React lifecycle.

Когда движение должно ощущаться как физическое: drag, spring transitions, gestures, interactive panels. Для обычного fade/slide это часто лишняя зависимость и лишняя сложность.

D3 напрямую нужен для нестандартной визуализации, кастомных scales/layouts и полного контроля. Для dashboard чаще быстрее взять Recharts, Tremor, nivo, Victory или react-chartjs. visx полезен, когда нужен D3-level контроль, но в React-компонентной форме.

Большие datasets, частые re-render-ы, тяжелые SVG trees, resize handlers и animations могут быстро стать hot path. Важно агрегировать данные, memoize дорогие расчеты, виртуализировать списки рядом с charts и не пересоздавать config без причины.

Vitest хорошо интегрируется с Vite, быстрее стартует в Vite-проектах и использует похожий API. Jest остается зрелым вариантом для старых проектов и ecosystem, но в новых Vite React apps Vitest часто проще.

RTL помогает тестировать поведение компонента глазами пользователя: текст, роли, формы, клики, ошибки. Она намеренно отталкивает от проверки internal state и implementation details.

Для критичных end-to-end flows: login, checkout, создание сущности, routing, permissions, интеграция с backend или browser APIs. Как и в Angular, E2E стоит использовать точечно, потому что они дороже unit/component tests.

MSW перехватывает network requests и позволяет тестировать UI без настоящего backend. Это удобно для component и integration tests, где важна реалистичная работа API layer.

Полезны для стабильного generated output или маленьких структур, где snapshot действительно читают. Вредят, когда снимок большой, часто обновляется и заменяет нормальные behavioral assertions.

Auth связан с backend, cookies, sessions, OAuth/OIDC, CSRF/XSS, storage и deployment. React может показать login UI и читать session state, но модель безопасности определяется сервером и инфраструктурой.

Для web-приложений часто безопаснее httpOnly cookies и server/session validation, чем хранить access token в localStorage. В React state можно держать только derived UI state о пользователе, а не делать frontend единственным источником правды.

Clerk, Auth0, WorkOS AuthKit, Supabase Auth, Firebase Auth или AWS Cognito уместны, когда команда хочет быстрее получить OAuth, SSO, MFA, user management и compliance features. Self-hosted auth оправдан, если есть сильные требования к контролю, стоимости, данным или интеграции.

API routes/server functions живут рядом с frontend и удобны для BFF, simple endpoints и server-side integration. Отдельный backend лучше, когда есть независимый lifecycle, несколько клиентов, сложная domain model, очереди, фоновые jobs или отдельная backend-команда.

Hono/Fastify/Express подходят для легкого Node или edge backend. NestJS ближе Angular-разработчикам из-за DI, decorators и module structure. tRPC особенно полезен, когда frontend и backend на TypeScript и команда хочет end-to-end type safety.

Prisma дает высокий DX, schema-first workflow и зрелый ecosystem. Drizzle ближе к SQL-like typed query builder и может быть привлекательнее для команд, которым нужен более явный контроль SQL. В любом случае database layer не должен зависеть от React.

Vercel тесно поддерживает Next.js features: SSR, ISR, App Router, serverless/edge functions и previews. Это хороший DX, но важно понимать vendor lock-in и переносимость нестандартных возможностей.

Когда важны edge runtime, глобальная близость к пользователю, Cloudflare Pages/Workers и интеграция с KV, D1 или R2. Но edge runtime имеет ограничения Node APIs, поэтому совместимость нужно проверять заранее.

SPA можно раздать как static files через CDN. SSR-приложению нужен runtime: serverless functions, edge runtime или long-running server. Это влияет на cache, secrets, logs, cold starts и стоимость.

Нужен ли SSR, где живет backend, какие требования к regions, secrets, logs, previews, cache, compliance, budget и rollback. Frontend-разработчик не обязан быть DevOps, но должен понимать, как deployment model влияет на React-стек.

i18n включает plural rules, dates, numbers, currencies, direction, fallback languages, routing, SEO и перевод контента. Для React часто встречаются react-i18next, next-intl, Lingui и FormatJS, но базовые проблемы общие для всего frontend.

react-i18next подходит для обычных React SPA и проектов, где нужен зрелый i18next ecosystem. next-intl логичен в Next.js, особенно когда i18n связан с routing, server rendering и переводом metadata.

Rich text - это schema, serialization, paste handling, history, collaboration, accessibility, security и migration content model. Tiptap, BlockNote, Plate, Lexical и Slate выбирают не по названию, а по требованиям к редактору и данным.

Нужно sanitization, allowlist tags/attributes, осторожность с links/media и понимание, где HTML хранится и рендерится. React escaping помогает для text nodes, но намеренный render HTML требует отдельной security проверки.

Размеры файлов, типы, вирусы, private access, presigned URLs, retry, progress, cancellation и обработка ошибок. Иногда достаточно native file input, иногда нужны Uppy, UploadThing или собственный flow через storage provider.

Нужно учитывать keyboard access, screen readers, touch devices, auto-scroll, collision detection, virtualization и reordering state. dnd-kit часто лучше современного выбора, а react-beautiful-dnd стоит воспринимать как legacy context.

React Native использует React-модель компонентов, но рендерит native UI, а не DOM. Поэтому знание React помогает, но не заменяет понимание mobile navigation, gestures, native modules, platform APIs и performance.

Expo дает быстрый старт, managed workflow, OTA updates и готовые APIs для типовых mobile-задач. Он особенно полезен, когда команда не хочет сразу погружаться в native build infrastructure.

Electron подходит, когда нужно desktop-приложение на web stack и важна зрелая ecosystem. Tauri может быть легче по ресурсам и размеру bundle, но требует учитывать Rust/backend integration и зрелость нужных plugins.

Обычно переиспользуют domain types, validation schemas, API client, query keys, business rules и design tokens. UI components между React DOM и React Native обычно не переиспользуются напрямую, потому что primitives и accessibility contracts разные.

SPA или SSR, SEO или internal app, простые или enterprise forms, много server state или почти все локально, готовая UI library или своя дизайн-система, monorepo или один app, deployment target, уровень команды, testing, accessibility, performance и security.

Vite SPA - для client-side apps без сильных SEO/SSR требований. Next.js - для SSR/SSG/fullstack и routing conventions. Astro - для content/static сайтов, где React нужен точечно и важно доставлять минимум JavaScript.

Меньше зависимостей снижает maintenance и upgrade risk, но команда может тратить время на повторное изобретение сложных вещей: forms, cache, accessibility primitives. Быстрее delivery через libraries оправдан, если команда понимает стоимость ownership и exit strategy.

Overengineering: global store для локальной кнопки, monorepo без нескольких packages, SSR без SEO/perf причины, слишком много UI abstractions. Underengineering: ручной fetch без cache в большом продукте, формы без error model, styling без tokens, отсутствие tests на критичные flows.

Разделите ответственность: server state - query layer, client state - local/store, forms - отдельный form layer, UI - design system или library, tests - pyramid от unit к E2E. Не выбирайте библиотеку, пока не понятно, какую проблему она закрывает.

Функция, которая возвращает JSX и описывает часть UI.

Синтаксис, похожий на HTML внутри JS/TS, который компилируется в вызовы React.

Входные данные компонента, аналог @Input() в Angular.

Данные компонента, изменение которых вызывает render.

Props приходят снаружи, state принадлежит компоненту.

Через onClick, передав функцию.

<button onClick={() => setOpen(true)}>Open</button>

Через array.map() и обязательно указать key.

Он помогает React сопоставлять элементы между render-ами. По смыслу это похоже на идею trackBy в Angular.

Input, значение которого хранится в state и обновляется через onChange.

Передать callback prop из parent в child.

Vite - build tool и dev server, с которого часто начинают React SPA. Он не является React framework и не заменяет router, data fetching или backend.

React отвечает за component model и rendering. React Router - отдельная библиотека для навигации между страницами или routes, поэтому ее нужно выбирать и настраивать отдельно.

fetch - browser API для HTTP-запросов. В React его можно вызвать из effect или query layer, но сам React не дает аналога Angular HttpClient.

CSS Modules позволяют писать обычный CSS с локальными class names для компонента. Это один из простых способов избежать случайных конфликтов глобальных стилей.

Component library дает готовые UI-компоненты: buttons, dialogs, tables, forms и navigation. Важно понимать не только внешний вид, но и accessibility, theming и ограничения API.

React Hook Form - библиотека для форм, которая помогает регистрировать поля, валидировать данные, показывать ошибки и обрабатывать submit. Ее обычно берут, когда ручной useState для формы становится шумным.

Вычисление JSX для текущих props и state. Render должен быть предсказуемым и без side effects.

Каждый render видит фиксированные значения state. Setter не меняет переменную в уже выполняющемся render-е.

React группирует несколько updates и делает один render. Поэтому сразу после setter-а нельзя полагаться на новое значение в текущей snapshot-логике.

Когда новое значение зависит от предыдущего: счетчики, добавление элемента, переключение boolean, обновление очереди.

useEffect нужен для синхронизации с внешним миром. Он не нужен для вычислений из props/state: такие значения лучше посчитать во время render-а или через memoization, если это действительно дорого.

Похож частым запуском один раз после mount. Не похож моделью dependencies, cleanup и тем, что React не требует класть инициализацию UI state именно в effect.

Создать AbortController, передать signal в fetch, а в cleanup вызвать abort().

Функция с именем use..., которая выносит stateful logic и может использовать другие hooks.

Когда значение нужно многим вложенным компонентам: theme, locale, auth session, настройки приложения.

Он передает value, но не решает cache, нормализацию, debug tooling, optimistic updates и granular updates.

Для простого случая - custom hook с useEffect + fetch. Для server state в продукте - query library, например TanStack Query.

Server state живет на сервере и может устаревать. Client state описывает локальное состояние UI и пользовательские черновики.

React Router подключается отдельно и не является частью React. Angular Router - встроенная часть Angular ecosystem.

Controlled forms держат значения в React state. Angular Reactive Forms дают готовую модель controls, groups, validators и statuses.

Мутация form state, слишком много ручного boilerplate, смешение validation и rendering, отсутствие обработки server errors.

Когда приложение много работает с server state: cache, refetch, invalidation, retry, pagination, optimistic updates. Если данные принадлежат серверу, query layer обычно лучше, чем складывать их в global client store.

Zustand подходит для легкого shared client state без большого boilerplate. Redux Toolkit лучше, когда нужен строгий data flow, devtools, middleware и единые conventions для сложного client state.

Когда через него пытаются хранить часто меняющийся большой state, cache server data или сложную business logic. Context лучше использовать для передачи value вроде theme, locale или session summary.

Server state принадлежит backend и требует синхронизации. Global client state принадлежит UI или frontend domain flow: например открытая панель, выбранные элементы, wizard state или локальные настройки.

Смотрите на размер формы, validation model, nested fields, server errors, accessibility, TypeScript DX и integration со schema вроде Zod. Для простого input form library может быть лишней, для enterprise forms она часто окупается.

Проверять то, что видит и делает пользователь: роли, labels, текст, ввод, click, submit, error messages. Не стоит тестировать внутренний state компонента, если это не публичный contract.

Когда нужно проверить реальный пользовательский сценарий через browser: навигация, auth, формы, permissions, критичные flows. Для маленькой pure-функции Playwright не нужен.

CSS Modules дают локальный scope обычным CSS-классам. Tailwind дает utility classes и быстрый workflow прямо в JSX. Оба подхода нормальны; выбор зависит от design process, команды и требований к UI consistency.

Headless UI дает behavior, accessibility primitives и state API без готового визуального слоя. Component library дает готовые компоненты с дизайном, но может сильнее ограничивать кастомизацию.

Начать с features/pages/shared, отдельно выделить API layer, domain types, reusable UI и routing. Структура должна помогать искать use cases, а не просто сортировать файлы по типу.

UI logic можно держать в component или hook. Pure domain logic лучше вынести в module functions. Shared client state - в store. Server state - в query layer.

DI - система зависимостей с tokens и injectors. Context - передача value через React tree. Они пересекаются по задачам, но не являются одинаковыми механизмами.

Angular service - injectable dependency с lifecycle в injector. Custom hook - reusable React logic, которая вызывается внутри component tree.

Signals дают fine-grained reactivity, React чаще re-render-ит component function. useMemo и useCallback помогают стабилизировать дорогие вычисления и ссылки, но не заменяют state.

Держать state ближе к месту использования, не поднимать его без необходимости, использовать стабильные keys, избегать лишнего Context value churn, применять memoization только там, где есть измеримая причина.

Они нужны для дорогих вычислений, стабильных props в memoized children и корректных dependencies. Если вычисление дешевое и нет проблемы с render-ами, это лишний шум.

Делать API маленьким, называть props по домену, не смешивать data fetching с presentation, оставлять escape hatches для сложных cases.

Разделить большой компонент на согласованные части, например Tabs.Root, Tabs.List, Tabs.Trigger, Tabs.Content. Общее состояние можно передать через Context внутри компонента.

Выбрать form library, описать schema или validators отдельно от UI, разделить client validation, async validation и server errors.

Context - для передачи value. TanStack Query - для server state. Redux Toolkit - для сложного client state и строгого debug flow. Zustand - для легкого shared client state.

Проверять поведение через React Testing Library: что пользователь видит и делает. Внутренние hooks и functions тестировать отдельно, если там есть самостоятельная логика.

Error boundary ловит ошибки render-а ниже по дереву и показывает fallback UI. В React это class component API или готовая библиотека-обертка.

Через dynamic import, React.lazy, Suspense или lazy routes в router/framework.

Через независимые bundles, module federation, web components или shell-level integration. Важно договориться о routing, auth, design system, events и shared dependencies.

Начать с требований: SPA/SSR, SEO, forms, server state, design system, team skill, deployment, testing и accessibility. Затем выбрать минимальный набор решений, который закрывает эти требования без лишней platform complexity.

Разделить API client, query keys, server state, mutations, invalidation и error model. UI-компоненты не должны знать низкоуровневые детали endpoint-ов, а domain logic не должна зависеть от React без причины.

Выбрать form library, договориться о schema validation, server errors, field components, accessibility и submit flow. Для Angular-разработчика это аналог решения, где проходит граница между Reactive Forms model и UI.

Определить tokens, primitives, component API, theming, accessibility rules и ownership дизайн-системы. В mixed Angular + React окружении лучше разделять общие tokens/specs и framework-specific adapters.

Фиксировать критерии выбора библиотек, назначать owners, обновлять зависимости регулярно и не добавлять новую library для локальной задачи без review. Хороший React stack - это не максимальный список packages, а понятные boundaries.

Начать с ограниченного use case, shared coding guidelines, обучения React mental model и code review checklist. Особенно важно проговорить отличия: hooks, immutable state, effects, Context и отсутствие встроенных Angular-like слоев.

Выделить apps и libs, запретить случайные зависимости между фреймворками, вынести framework-agnostic domain logic, tokens и tooling. Nx часто удобен для Angular + React monorepo, потому что дает project graph и affected commands.

Vite SPA - для client-side приложений, Next.js - для SSR/SSG/fullstack и SEO, Astro - для content/static сайтов с точечной интерактивностью. Выбор должен идти от продукта, а не от популярности framework-а.

Проверить browser-only code, auth/session model, cache, dates/locales/random values, third-party widgets и deployment runtime. Hydration mismatch часто появляется там, где server render и первый client render видят разные данные.

Angular дает больше структуры и единых решений. React дает больше свободы выбора. Trade-off между предсказуемостью платформы и гибкостью стека.

Angular проектировался как framework. React фокусируется на UI layer, поэтому router, forms, server state, SSR и styling команда выбирает отдельно.

Смотреть на требования к routing, SSR, формам, server state, дизайн-системе, найму, observability, testing и lifecycle поддержки.

Когда команде нужна строгая единая платформа из коробки, много одинаковых enterprise-форм, сильная зависимость от DI и желание минимизировать архитектурный выбор.

Когда нужен легкий UI layer, гибкий подбор libraries, быстрая интеграция в существующий стек или команда уже сильна в React ecosystem.

Идти feature by feature, стабилизировать contracts, вынести domain logic, договориться о routing/auth/design system и не переписывать все сразу без продуктовой причины.

Разделить tokens, accessibility contract, visual specs и framework adapters. Компоненты могут быть разными, но поведение и дизайн-правила должны быть общими.

Domain logic держать в pure TypeScript modules без зависимости от Angular или React. UI logic оставлять в components, hooks, services и adapters конкретного framework.

Разделять server state, client state, form drafts и derived values. Описывать ownership данных и правила invalidation.

Проверять, какие страницы реально требуют SSR, какие данные доступны на сервере, есть ли browser-only код, как устроены cache, auth и deployment.

HTML с сервера не совпадает с первым client render: разные даты, random values, browser-only данные, условный rendering по window, различия локали.

Следить за dependencies, lazy loading, route splitting, tree shaking, design system imports и анализом bundle report.

Pure logic покрыть unit tests, components - behavior tests, critical flows - Playwright, data fetching - mock server или query layer tests.

Проверять data flow, immutable updates, корректные dependencies hooks, отсутствие лишних effects, доступность, тестируемость и понятный выбор libraries.

Зачем нужен переход, какие проблемы он решает, кто владеет архитектурой, какой стек выбран, как мигрировать без остановки разработки и как обучать команду.

Зафиксировать требования, альтернативы, trade-offs, риски, migration path и критерии пересмотра решения. Senior-ответ должен показывать не вкус к библиотекам, а ownership и способность поддерживать стек несколько лет.

Angular platform дает единый framework contract и официальные решения для многих слоев. React ecosystem дает гибкость, но требует больше локальных соглашений, dependency governance и архитектурного review.

Риск не в самом Next.js, а в использовании platform-specific функций без exit strategy: edge/runtime assumptions, deployment APIs, cache behavior, analytics, image pipeline. Перед выбором нужно понять, насколько легко перенести app на другой runtime.

Когда команда постоянно меняет libraries, спорит о вкусе вместо требований, дублирует решения и не имеет platform ownership. В таком контексте Angular-like единая платформа может быть продуктивнее.

Вести approved stack, dependency review, bundle checks, upgrade policy и ownership. Любая новая library должна иметь понятную проблему, альтернативы и план поддержки.

Держать domain types, validation, business rules и pure transformations в TypeScript modules без React и Angular imports. Framework-specific code должен быть adapter layer: components, hooks, services, effects и routing.

Оценивать зрелость, maintenance, release cadence, TypeScript support, ecosystem, hiring, migration path и соответствие продуктовым требованиям. Популярность важна, но не заменяет ownership cost.

Смотреть на active maintenance, breaking changes, issue velocity, docs, adoption, bundle impact, testability, security history и совместимость с текущим framework/runtime. Для critical path нужна более высокая планка, чем для dev-only tooling.

Разделить общие стандарты и framework adapters: design tokens, accessibility rules, CI, testing conventions, observability, security и release process. Angular и React apps могут отличаться реализацией, но platform contract должен оставаться единым.

Travel Planner - небольшой проект для тренировки React-мышления без ухода в абстрактные примеры.

Функции:

1. Список поездок.
2. Добавление поездки.
3. Страница деталей поездки.
4. Список мест внутри поездки.
5. Фильтр по стране/городу.
6. Загрузка mock data через fetch.
7. Состояния loading / error / empty.
8. Роутинг.
9. Простая форма.
10. Сохранение в localStorage.

Минимальная модель данных:

type Place = {
  id: string;
  title: string;
  city: string;
};

type Trip = {
  id: string;
  title: string;
  country: string;
  places: Place[];
};

• useEffect не является полным аналогом ngOnInit.
• props нельзя менять внутри child component.
• state нельзя мутировать напрямую.
• setState асинхронен в практическом смысле: нельзя сразу после setter ожидать новое значение в той же render-snapshot логике.
• key нужен не для красоты, а для reconciliation.
• Context не равен полноценному state manager.
• useMemo и useCallback не нужно ставить везде.
• React Router не является частью самого React.
• Next.js не равен React.
• Server state и client state лучше разделять.
• Controlled input не всегда лучший выбор для больших форм.
• React дает меньше структуры из коробки, поэтому архитектуру нужно выбирать осознанно.

1. JSX, components, props.
2. State, events, lists.
3. Forms and controlled inputs.
4. useEffect and data fetching.
5. Custom hooks.
6. Routing.
7. Context and state management.
8. Angular vs React differences.
9. Testing.
10. Architecture and stack choices.

Context удобен для редко меняющихся сквозных значений: theme, locale, current user. Он не является полноценным store: при изменении value все consumers могут получить render work, если не разделить context или не мемоизировать value.

Redux уместен, когда важны предсказуемые transitions, devtools, middleware, time travel, строгие правила обновления и большая команда. Zustand проще и легче для локальных client stores без большого boilerplate.

Angular-разработчику важно сравнить это не с DI, а с управлением состоянием: Angular service с signals или RxJS может занимать ту же нишу, что store, а DI только доставляет зависимость.

const ThemeContext = createContext<'light' | 'dark'>('light');

function Toolbar(): ReactNode {
  const theme = useContext(ThemeContext);

  return <button className={theme}>Save</button>;
}

useTransition помечает state update как некритичный: React может отложить дорогой render, чтобы input, click и другие срочные реакции оставались отзывчивыми. useDeferredValue откладывает потребление уже изменившегося значения, например поисковую строку для тяжелого списка.

Для Angular-разработчика полезная аналогия: это не то же самое, что debounceTime в RxJS. Debounce меняет поток событий и timing данных, а concurrent rendering управляет приоритетом rendering work внутри React.

const [isPending, startTransition] = useTransition();
const deferredQuery = useDeferredValue(query);

function onChange(value: string): void {
  setQuery(value);
  startTransition(() => {
    setVisibleItems(filterItems(value));
  });
}

Follow-up вопросы:

• Почему эти hooks не ускоряют саму дорогую функцию?
• Как понять, что проблема именно в render, а не в network?
• Где лучше оставить обычную оптимизацию данных или virtualization?

App Router строится вокруг app/, nested layouts, Server Components, route handlers, loading/error states и cache модели Next.js. Server Component выполняется на сервере и не попадает в client bundle, а Client Component нужен для state, effects, browser APIs и event handlers.

С Angular SSR это похоже только верхнеуровнево: оба подхода могут отдавать HTML с сервера, но Next.js сильнее связывает routing, data fetching, server/client boundary и deployment runtime с framework conventions.

// app/users/[id]/page.tsx
export default async function UserPage({params}: {params: Promise<{id: string}>}) {
  const {id} = await params;
  const user = await loadUser(id);

  return <h1>{user.name}</h1>;
}

Частые ошибки:

• добавлять 'use client' слишком высоко и раздувать client bundle;
• ожидать browser API в Server Component;
• путать route handler с client-side API layer;
• не понимать cache и revalidation.

Что проверяет: custom hooks, cleanup, SSR, browser APIs.

import {useEffect, useState} from 'react';

interface WindowSize {
  readonly width: number;
  readonly height: number;
}

const initialSize: WindowSize = {
  width: 0,
  height: 0,
};

export function useWindowSize(): WindowSize {
  const [size, setSize] = useState(initialSize);

  useEffect(() => {
    const updateSize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    updateSize();
    window.addEventListener('resize', updateSize);

    return () => {
      window.removeEventListener('resize', updateSize);
    };
  }, []);

  return size;
}

На интервью стоит обсудить initial value для SSR, throttle/debounce для частых resize events и то, почему доступ к window находится внутри useEffect.

Кандидат должен показать controlled input, loading/error/empty states, отмену устаревших запросов, keyboard navigation и доступную разметку combobox/listbox. Минимальная production-форма:

• хранить query, items, activeIndex, status;
• отменять предыдущий fetch через AbortController;
• не показывать результат старого запроса после более нового;
• поддержать Arrow Up, Arrow Down, Enter и Escape;
• задать roles и доступное имя.

const [query, setQuery] = useState('');
const [items, setItems] = useState<ReadonlyArray<Suggestion>>([]);

useEffect(() => {
  const controller = new AbortController();

  fetch(`/api/suggest?q=${encodeURIComponent(query)}`, {
    signal: controller.signal,
  })
    .then((response) => response.json())
    .then(setItems)
    .catch((error: unknown) => {
      if (!isAbortError(error)) {
        setItems([]);
      }
    });

  return () => {
    controller.abort();
  };
}, [query]);

Angular-разработчику можно предложить сравнить решение с Angular Signals + HttpClient + CDK a11y primitives.