Что должен уметь Middle }

Оптимизирует алгоритмы фильтрации и сортировки данных в React-приложениях с помощью useMemo и useCallback. Понимает алгоритм Virtual DOM diffing, применяет мемоизацию для предотвращения лишних пересчётов в компонентах с TanStack Query.

Управляет сложными асинхронными потоками в React: параллельные запросы через Promise.all, зависимые запросы в TanStack Query, оптимистичные обновления с мутациями. Использует Suspense для декларативной загрузки данных и React.lazy для code splitting.

Настраивает ESLint с eslint-plugin-react-hooks и @typescript-eslint для обеспечения качества React-кода. Пишет строго типизированные компоненты и хуки, применяет strict mode TypeScript, настраивает husky + lint-staged для pre-commit проверок.

Владеет продвинутыми React-паттернами: compound components, render props, HOC, custom hooks для переиспользования логики. Применяет паттерн provider через React Context и Zustand для управления состоянием, использует TypeScript generics для типобезопасных компонентов.

Выбирает оптимальные структуры данных для нормализации state в Zustand/Jotai: Map для быстрого доступа по ключу, Set для уникальных коллекций. Проектирует форму стейта для эффективного обновления React-компонентов без лишних ре-рендеров.

Создаёт строго типизированные React-компоненты с generics, discriminated unions для props, условными типами. Типизирует хуки, контексты Zustand/Jotai, ответы TanStack Query. Использует zod для runtime-валидации на границе API.

Настраивает визуальное регрессионное тестирование для React-компонентов: интеграция Storybook с Chromatic для автоматических скриншот-сравнений, Playwright visual testing для E2E-сценариев. Покрывает ключевые состояния: responsive breakpoints, dark mode, loading states.

Реализует accessible React-компоненты: использует React Aria (Adobe) или Radix UI для доступных примитивов, управляет фокусом через useRef и focus management, реализует keyboard navigation для custom components. Тестирует с axe-core и проверяет через screen reader (VoiceOver/NVDA).

Создаёт комплексные тесты React-компонентов: мокирование хуков и контекстов, тестирование асинхронных операций с waitFor, интеграционные тесты с MSW для мокирования API. Настраивает coverage reports, тестирует accessibility через jest-axe.

Работает с micro-frontends в React: настраивает Webpack Module Federation для шаринга компонентов между приложениями, реализует runtime загрузку remote modules, управляет shared dependencies (React, React DOM) для предотвращения дублирования. Интегрирует micro-frontend в host application.

Оптимизирует бандл React-приложения: настраивает chunk splitting в Vite для оптимального кеширования, реализует route-based code splitting в Next.js, tree-shaking для UI-библиотек. Настраивает bundle size limits в CI, анализирует и устраняет дублирование зависимостей.

Создаёт переиспользуемые React-компоненты для дизайн-системы на базе Radix UI primitives: compound components, полиморфные компоненты через asChild. Документирует в Storybook с интерактивными примерами, типизирует props через TypeScript.

Использует продвинутые CSS-возможности в React-компонентах: container queries, :has(), @layer для управления специфичностью, CSS logical properties. Настраивает CSS Modules с типизацией через typed-css-modules, анимации через Framer Motion.

Оптимизирует Core Web Vitals в React/Next.js приложениях: LCP через приоритизацию загрузки и Server Components, INP через useTransition и дебаунс обработчиков, CLS через резервирование места для динамического контента и font display swap.

Реализует сложные React UI-компоненты с styled-components или Emotion: динамические темы, адаптивные стили. Оптимизирует рендеринг, избегая лишних пересчётов стилей. Пишет тесты для styled-компонентов, применяет CSS-in-JS паттерны для state-driven стилизации.

Реализует продвинутые паттерны data fetching в React: мутации с оптимистичными обновлениями в TanStack Query, infinite scroll через useInfiniteQuery, параллельные и зависимые запросы. Настраивает глобальный error handling и retry-стратегии.

Самостоятельно реализует сложные UI-компоненты с Next.js. Оптимизирует производительность рендеринга. Пишет тесты. Применяет инструменты для state management.

Реализует PWA-функциональность в React/Next.js приложениях: стратегии кеширования (cache-first, network-first) через Workbox, push-уведомления, offline fallback. Настраивает precaching критических ресурсов и runtime caching для API-ответов.

Реализует сложные UI-компоненты с продвинутыми паттернами React, такими как compound components и render props. Оптимизирует рендеринг с помощью useMemo, useCallback и React.memo. Пишет всесторонние юнит- и интеграционные тесты с React Testing Library.

Реализует продвинутые рендеринг-паттерны в Next.js App Router: streaming SSR с Suspense, ISR с revalidate, параллельные и перехваченные маршруты. Оптимизирует TTFB через Server Components, настраивает кеширование данных и полных страниц.

Проектирует state management в React-приложениях: разделение серверного (TanStack Query) и клиентского (Zustand/Jotai) состояния, оптимизация ре-рендеров через selectors и атомарный стейт. Реализует derived state, middleware в Zustand для логирования и персистентности.

Создаёт кастомную конфигурацию Tailwind CSS для React-проекта: расширяет тему, создаёт плагины, использует @apply для переиспользуемых стилей. Интегрирует с Radix UI и Headless UI, настраивает purge для оптимального bundle size с Vite.

Настраивает продвинутую конфигурацию Vite для React: кастомные плагины, оптимизация зависимостей через optimizeDeps, настройка proxy для API. Конфигурирует Vitest как test runner, env-переменные через .env файлы, настраивает build для production.

Интегрирует продвинутые Web API в React-приложения: IntersectionObserver для lazy loading через хуки, ResizeObserver для адаптивных компонентов, History API для кастомной навигации. Создаёт переиспользуемые React-хуки для типичных Web API паттернов.

Создаёт React-обёртки для Web Components с корректной типизацией TypeScript: маппинг свойств, форвардинг событий, поддержка ref. Реализует двустороннюю интеграцию между React-компонентами и Custom Elements для использования в других фреймворках.

Разбирается в сетевых аспектах React/Next.js приложений: настройка CORS для API routes, HTTP/2 и Server Push для оптимизации загрузки, CDN-кеширование статики. Оптимизирует сетевые запросы: compression, resource hints (preload, prefetch, preconnect).

Применяет OWASP-рекомендации в React/Next.js приложениях: настройка security headers (CSP, HSTS, X-Frame-Options) через next.config.js, безопасная аутентификация через NextAuth.js, защита API routes от injection. Проводит security review кода, использует npm audit.