What a Mid-level } should know

Optimizes filtering and sorting algorithms in React applications using useMemo and useCallback. Understands the Virtual DOM diffing algorithm, applies memoization to prevent unnecessary recalculations in components with TanStack Query.

Manages complex async flows in React: parallel requests through Promise.all, dependent queries in TanStack Query, optimistic updates with mutations. Uses Suspense for declarative data loading and React.lazy for code splitting.

Configures ESLint with eslint-plugin-react-hooks and @typescript-eslint for React code quality. Writes strictly typed components and hooks, applies TypeScript strict mode, configures husky + lint-staged for pre-commit checks.

Chooses optimal data structures for state normalization in Zustand/Jotai: Map for fast key-based access, Set for unique collections. Designs state shape for efficient React component updates without unnecessary re-renders.

Proficient in advanced React patterns: compound components, render props, HOC, custom hooks for logic reuse. Applies provider pattern through React Context and Zustand for state management, uses TypeScript generics for type-safe components.

Creates strictly typed React components with generics, discriminated unions for props, conditional types. Types hooks, Zustand/Jotai contexts, TanStack Query responses. Uses zod for runtime validation at the API boundary.

Optimizes React application bundle: configures chunk splitting in Vite for optimal caching, implements route-based code splitting in Next.js, tree-shaking for UI libraries. Configures bundle size limits in CI, analyzes and eliminates dependency duplication.

Creates comprehensive React component tests: mocking hooks and contexts, testing async operations with waitFor, integration tests with MSW for API mocking. Configures coverage reports, tests accessibility through jest-axe.

Optimizes Core Web Vitals in React/Next.js applications: LCP through load prioritization and Server Components, INP through useTransition and handler debouncing, CLS through reserving space for dynamic content and font display swap.

Implements complex React UI components using styled-components or Emotion with dynamic theming and responsive styles. Optimizes rendering performance by avoiding unnecessary style recalculations. Writes unit tests for styled components and applies proper CSS-in-JS patterns for state-driven styling.

Implements advanced data fetching patterns in React: mutations with optimistic updates in TanStack Query, infinite scroll through useInfiniteQuery, parallel and dependent queries. Configures global error handling and retry strategies.

Creates reusable React components for design system based on Radix UI primitives: compound components, polymorphic components through asChild. Documents in Storybook with interactive examples, types props through TypeScript.

Works with micro-frontends in React: configures Webpack Module Federation for sharing components between applications, implements runtime remote module loading, manages shared dependencies (React, React DOM) to prevent duplication. Integrates micro-frontend into host application.

Uses advanced CSS capabilities in React components: container queries, :has(), @layer for specificity management, CSS logical properties. Configures CSS Modules with typing through typed-css-modules, animations through Framer Motion.

Independently implements complex UI components with Next.js. Optimizes rendering performance. Writes tests. Applies state management tools.

Implements PWA functionality in React/Next.js applications: caching strategies (cache-first, network-first) through Workbox, push notifications, offline fallback. Configures precaching of critical resources and runtime caching for API responses.

Implements complex UI components with advanced React patterns like compound components and render props. Optimizes rendering with useMemo, useCallback, and React.memo. Writes comprehensive unit and integration tests with React Testing Library.

Implements advanced rendering patterns in Next.js App Router: streaming SSR with Suspense, ISR with revalidate, parallel and intercepting routes. Optimizes TTFB through Server Components, configures data and full-page caching.

Designs state management in React applications: separation of server (TanStack Query) and client (Zustand/Jotai) state, re-render optimization through selectors and atomic state. Implements derived state, middleware in Zustand for logging and persistence.

Creates custom Tailwind CSS configuration for React projects: extends theme, creates plugins, uses @apply for reusable styles. Integrates with Radix UI and Headless UI, configures purge for optimal bundle size with Vite.

Configures visual regression testing for React components: Storybook integration with Chromatic for automatic screenshot comparison, Playwright visual testing for E2E scenarios. Covers key states: responsive breakpoints, dark mode, loading states.

Configures advanced Vite setup for React: custom plugins, dependency optimization through optimizeDeps, API proxy configuration. Configures Vitest as test runner, env variables through .env files, production build setup.

Implements accessible React components: uses React Aria (Adobe) or Radix UI for accessible primitives, manages focus through useRef and focus management, implements keyboard navigation for custom components. Tests with axe-core and verifies through screen readers (VoiceOver/NVDA).

Integrates advanced Web APIs in React applications: IntersectionObserver for lazy loading through hooks, ResizeObserver for adaptive components, History API for custom navigation. Creates reusable React hooks for typical Web API patterns.

Creates React wrappers for Web Components with correct TypeScript typing: property mapping, event forwarding, ref support. Implements bidirectional integration between React components and Custom Elements for use in other frameworks.

Understands networking aspects of React/Next.js applications: CORS configuration for API routes, HTTP/2 and Server Push for load optimization, CDN caching for static assets. Optimizes network requests: compression, resource hints (preload, prefetch, preconnect).

Applies OWASP recommendations in React/Next.js applications: security headers configuration (CSP, HSTS, X-Frame-Options) through next.config.js, secure authentication through NextAuth.js, API route protection from injection. Conducts security code review, uses npm audit.