What a Senior } should know

Designs efficient algorithms for processing large data volumes on the client considering main thread constraints. Applies Web Workers for heavy computations, uses list virtualization (TanStack Virtual) and incremental rendering strategies.

Designs async architecture for React applications: caching and invalidation strategies in TanStack Query, streaming SSR in Next.js, concurrent rendering with useTransition and useDeferredValue for responsive UI.

Designs React code quality assurance system: custom ESLint rules for architectural conventions, automated bundle size analysis in CI, test coverage metrics. Introduces Storybook for component documentation and visual testing.

Designs complex data structures for caching and normalization in TanStack Query and client state. Implements optimistic updates with rollback, uses immer for safe mutations of nested structures in React applications.

Designs React application architectural patterns: modular structure with feature-sliced approach, dependency inversion through DI containers. Creates libraries of reusable hooks and headless components based on Radix UI.

Designs advanced type systems for React applications: type-safe form libraries, Next.js App Router routing, generic components for UI libraries. Creates utility types and type guards for complex business domains.

Designs bundle optimization strategy for React applications: granular code splitting, prefetching through Speculation Rules API, module/nomodule approach. Introduces automated bundle size regression monitoring in CI, optimizes vendor chunks for long-term caching.

Designs React component testing strategy: test pyramid (unit/integration/E2E), shared test utilities and fixtures, custom render with providers. Creates testing-library/react extensions for project patterns, integrates with Storybook interaction tests.

Designs React application architecture for optimal Core Web Vitals: rendering strategy (SSR/SSG/ISR/PPR) in Next.js, progressive hydration, selective streaming. Configures RUM monitoring through web-vitals library, defines performance budgets.

Designs React design system architecture with CSS-in-JS: token-based theming, variant APIs, and compound component patterns. Optimizes bundle size through static extraction and critical CSS strategies. Implements accessible, performant component libraries meeting Core Web Vitals targets.

Designs data fetching architecture for React applications: server and client fetching strategy in Next.js App Router, caching and revalidation, streaming with Suspense. Implements API client abstraction layer with type safety through zod and TypeScript.

Designs React design system architecture: headless components with Radix UI, styling through Tailwind CSS + CVA, tokenization through CSS custom properties. Creates NPM package with tree-shaking, automated tests and visual regression testing.

Designs micro-frontend architecture on React: defines micro-frontend boundaries by business domains, configures shared state management (custom events, shared store), implements routing integration between host and remote apps. Designs CI/CD for independent deployment of each micro-frontend.

Designs React application CSS architecture: design token system through CSS custom properties, adaptive typography through clamp(), CLS optimization through aspect-ratio. Ensures CSS strategy compatibility with React Server Components and streaming.

Architects Next.js applications with App Router, RSC, and streaming SSR. Optimizes Core Web Vitals through ISR, image optimization, and code splitting. Establishes frontend architecture patterns for the team.

Designs PWA architecture for React applications: offline data synchronization strategy with TanStack Query server state, background sync, periodic synchronization. Ensures graceful degradation and progressive enhancement for all features.

Deeply understands React 18+ internal mechanisms: Fiber architecture, concurrent rendering, update batching. Optimizes performance through useTransition, useDeferredValue, React.memo, designs Suspense boundary architecture for streaming SSR.

Designs rendering architecture for Next.js applications: SSR/SSG/ISR/PPR strategy selection per route, streaming architecture with nested Suspense boundaries, edge rendering for global applications. Ensures balance between performance and data freshness.

Architects state management for complex React applications: domain-based state separation strategy, cross-tab synchronization through Zustand middleware, optimistic updates with rollback. Designs state machines through XState for complex UI flows.

Designs scalable Tailwind CSS architecture for React design system: custom plugins, design tokens, component variants through CVA (Class Variance Authority). Optimizes CSS output for Server Components and streaming SSR.

Designs visual regression testing system for React design system: multi-theme and multi-viewport matrix in Storybook/Chromatic, CI integration for blocking checks. Optimizes test stability: deterministic fonts, fixed dates, mock data.

Designs Vite configuration for complex React applications: multi-entry builds, library mode for UI packages, SSR configuration. Creates custom Vite plugins for specific transformations, optimizes cold start and HMR for large projects.

Designs accessibility architecture for React applications: focus management system for SPA navigation in Next.js, ARIA strategy for complex interactive patterns, accessibility-first approach in design system. Introduces automated a11y testing in CI.

Designs Web API abstractions for React applications: WebSocket managers with automatic reconnect and Zustand integration, Web Workers for heavy computations, Shared Workers for tab synchronization. Uses Streams API for large data processing.

Designs Web Components usage strategy in the React ecosystem: shared UI primitives as Custom Elements for framework-agnostic design system, Shadow DOM for encapsulation in micro-frontend architecture. Ensures SSR compatibility through Declarative Shadow DOM.

Designs GraphQL architecture for React applications: caching and invalidation strategy, persisted queries for security and performance, React Server Components integration. Optimizes query complexity, implements real-time subscriptions through WebSocket.

Architects API layer for React applications: BFF pattern through Next.js API Routes or Route Handlers, auto-generated types from OpenAPI spec, caching and revalidation strategy. Designs API abstractions for reuse between server and client components.

Designs Docker strategy for React applications: build pipeline optimization for CI/CD, multi-target builds (dev/staging/prod), health checks for Next.js. Configures Docker for SSR applications with proper memory management and graceful shutdown.

Designs React application network architecture: CDN distribution strategy for Next.js, edge middleware for geolocation and A/B testing, WebSocket/SSE for real-time functionality. Optimizes TTFB through edge computing and strategic caching at all levels.

Designs CI/CD architecture for React applications: matrix builds (Node versions, browsers), E2E tests through Playwright in CI, automatic deployment to staging/production. Optimizes pipeline time: selective testing, Turborepo remote caching, parallel jobs.

Designs comprehensive accessibility testing strategies for React application ecosystems covering WCAG 2.1 AA/AAA requirements. Implements advanced testing patterns including virtual DOM accessibility tree validation, dynamic route transition announcements, and complex state-driven widget testing with multiple assistive technologies. Builds reusable a11y testing utilities for React component libraries and establishes continuous accessibility monitoring for production React applications.

Designs E2E testing architecture for React applications: critical user flow coverage strategy, visual regression through Playwright screenshots, CI integration (sharding, selective testing). Optimizes stability: deterministic data, proper waits, isolated environments.

Designs unit testing strategy for React applications: test architecture (factories, fixtures, custom matchers), MSW integration for API mocking, Zustand store and TanStack Query hook testing. Defines what to test as unit vs integration.

Designs security architecture for React applications following OWASP: authentication and authorization strategy, SSRF protection in Server Components, secure cookie management. Introduces automated security scanning in CI (Snyk, SAST), defines threat model for frontend applications.

Integrates LLMs into React development architectural processes: code review with AI assistant, design system documentation generation, performance issue analysis. Defines applicability boundaries: when to trust generation, when expert verification is required.

Optimizes Copilot usage in React projects: custom instructions for project patterns (Next.js App Router, Zustand, Tailwind), Copilot Workspace for complex tasks. Defines effective usage patterns: where AI saves time, where it creates technical debt.

Mentors through code review in React projects: teaches architectural patterns, explains decision trade-offs (Server vs Client Components, state strategies). Creates review guidelines for the team, automates checks through danger.js and custom ESLint rules.

Designs Git workflow for React teams: branching strategy (trunk-based, GitFlow), monorepo conventions with Turborepo, release management strategy. Configures automated changelog through conventional-changelog, defines feature branch management strategy.

Designs performance budget system for React applications: per-route budgets (JS, CSS, images), automated CI/CD monitoring through Lighthouse CI and web-vitals, degradation alerts. Defines budgets based on competitive analysis and business requirements.