> Какие технологии и версии React используются в проектах компании (React)

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

В проектах компании используется React 18 с функциональными компонентами и хуками. Основные технологии: TypeScript, Redux Toolkit или Zustand для state management, React Router v6, React Query или RTK Query для работы с серверными данными, Styled Components или Tailwind CSS для стилизации. Версии библиотек регулярно обновляются, legacy-проекты могут использовать React 16-17 с классовыми компонентами.

Подробное объяснение

Стек React в компании эволюционировал: текущие проекты пишутся на React 18 с акцентом на Concurrent Mode и автоматическое batching. TypeScript - обязательный стандарт, все новые фичи используют типизацию. Для управления состоянием предпочтение отдаётся Redux Toolkit (с RTK Query) или более лёгкому Zustand - выбор зависит от сложности приложения. React Router v6 используется для клиентской маршрутизации, включая вложенные роуты и loaders. Стилизация - CSS-in-JS (Styled Components) или utility-first подход (Tailwind CSS). В legacy-проектах встречаются React 16.8-17, Redux без Toolkit, классовые компоненты и SASS. Миграция на новые версии планируется по мере необходимости, с учётом breaking changes.

На практике

В текущих проектах мы используем React 18.2.0, TypeScript 5.x, Redux Toolkit 2.x с RTK Query для кэширования API-запросов. React Router v6.20 с data loaders для предзагрузки данных на уровне роута. Для стилей - Tailwind CSS 3.x с кастомными конфигурациями под брендбук. В одном из проектов используется Zustand 4.x для простого глобального состояния (тема, аутентификация). В legacy-проекте (React 16.13) - Redux без Toolkit, connect и mapStateToProps. Версии фиксируются в package.json, обновления проходят code review и регрессионное тестирование.

Пример кода

TSX
// Современный подход: React 18 + TypeScript + RTK Query
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getUser: builder.query<User, string>({
      query: (id) => `users/${id}`,
    }),
  }),
});

// Компонент с использованием хуков
const UserProfile: React.FC<{ userId: string }> = ({ userId }) => {
  const { data, isLoading } = useGetUserQuery(userId);
  if (isLoading) return <Spinner />;
  return <div>{data?.name}</div>;
};

Как отвечать на собеседовании

Начни с конкретных версий и технологий, которые реально используются в компании (если знаешь) или типичны для индустрии. Подчеркни понимание trade-off между разными подходами: например, почему выбран Redux Toolkit вместо MobX или Zustand. Упомяни, как решаются проблемы миграции между версиями React (особенно с 16 на 18). Покажи знание современных паттернов: хуки, Suspense, concurrent features. Если спросят про legacy - объясни, как поддерживается обратная совместимость и планируется обновление.

Что проверяет интервьюер

• Глубину знания React 18 и его возможностей (Concurrent Mode, automatic batching, transitions)
• Понимание экосистемы: выбор стейт-менеджмента, роутинга, стилизации под конкретные задачи
• Опыт работы с TypeScript в React-проектах
• Умение оценивать trade-off между разными версиями и подходами
• Знание процесса обновления зависимостей и работы с legacy-кодом

Типичные ошибки

• Называть только React без указания версий и сопутствующих библиотек
• Путать версии React (например, говорить про hooks в React 15)
• Не упоминать TypeScript, если он обязателен в компании
• Предлагать устаревшие подходы (классовые компоненты, PropTypes) без контекста legacy
• Игнорировать вопросы миграции и совместимости версий