> ## Documentation Index > Fetch the complete documentation index at: https://interview.anantapoudel.com/llms.txt > Use this file to discover all available pages before exploring further. # Introduction A complete, structured guide for mastering React at an intermediate and senior level.\ This documentation is divided into five main pillars, each containing detailed technical topics, best practices, and interview-grade explanations. *** ## 1. JavaScript & TypeScript Foundations This section strengthens your foundation in the two languages most commonly used with React. ### JavaScript Topics * Variables, scope, hoisting * Closures and lexical environment * Prototypal inheritance * Event loop, async execution, microtasks, macrotasks * Promises and async/await * `this` binding and arrow functions * Destructuring, spread, rest * Template literals * Array and object utilities * Modules (`import`, `export`) * Debounce and throttle * Shallow vs deep copy * Error handling with `try/catch` * Event bubbling and capturing * Functional programming patterns * Memory management and garbage collection ### TypeScript Topics * Basic and advanced types * Props and state typing * Event types (`React.ChangeEvent`, `React.MouseEvent`) * Generics for `useState` and `useRef` * Custom hook typings * Context and reducer typing * Utility types (`Partial`, `Pick`, `Record`, `ReturnType`) * Type narrowing and guards * Strict mode in `tsconfig.json` * Literal types and enums *** ## 2. React Core & Component Architecture Understand the underlying design principles behind React applications. ### React Fundamentals * Virtual DOM and reconciliation * Functional vs class components * Declarative vs imperative UI * Unidirectional data flow * Render cycle and diffing algorithm * StrictMode behavior * Lifecycle comparison (hooks vs classes) * Controlled and uncontrolled components * Keys and reconciliation strategies ### JSX, Components & Props * JSX syntax and rules * Functional components and props * Default props and destructuring * Component composition * Render props * Conditional rendering patterns * Avoiding prop drilling *** ## 3. Hooks, State & Data Management React is centered on hooks and reactive state. This section covers core and advanced patterns. ### React Hooks * Core hooks: `useState`, `useEffect`, `useRef`, `useContext`, `useReducer` * Performance hooks: `useCallback`, `useMemo` * Layout hooks: `useLayoutEffect`, `useImperativeHandle` * Advanced hooks: `useId`, `useDeferredValue`, `useTransition`, `useSyncExternalStore` * Creating custom hooks * Cleanup functions and dependency rules * Rules of hooks ### State Management (Local & Global) * Local state management with hooks * Derived state * Global state with Context API * Combining reducers * Preventing unnecessary re-renders ### State Management Libraries * Redux Toolkit * Zustand * Recoil * Jotai * MobX * XState (state machines) ### React Query (TanStack Query) * Query and mutation patterns * Cache management * Pagination and infinite queries * Background refetching * Optimistic updates *** ## 4. Performance, Testing & Routing A senior-level React developer must be proficient in optimization, testing, and advanced routing. ### Performance Optimization * `React.memo` and memoization strategies * `useCallback` and `useMemo` * Code splitting and lazy loading * Virtualized lists (`react-window`, `react-virtualized`) * Avoiding anonymous functions * Render batching and concurrency features * Profiling with React DevTools ### React Router * BrowserRouter, Routes, Route * `useNavigate`, `useParams`, `useLocation` * Nested and dynamic routes * Protected routes * Lazy-loaded routes * Route loaders and actions (React Router v6.4+) ### Forms & Controlled Components * Controlled vs uncontrolled components * Validation strategies * Libraries: React Hook Form, Formik, Yup * Custom form components * Performance with large forms ### Testing * Jest * React Testing Library * Mocking APIs and modules * Integration testing * E2E testing with Cypress or Playwright *** ## 5. System Design, Next.js, Deployment & Advanced Concepts Learn how to architect, scale, and deploy real-world React applications. ### Next.js (Full-Stack React) * File-based routing * SSR, SSG, ISR * API routes * Middleware * Server and client components * Image optimization * SEO optimization ### Architecture & Best Practices * Feature-based folder structures * Smart vs dumb component design * Hooks-based architecture * Reusable UI components * Monorepos with Nx or Turborepo * Environment configuration ### System Design Concepts * Component-driven design * Reusable design systems * Real-time updates with WebSockets * Caching with React Query and IndexedDB * Multi-tenant architecture * Offline-first React apps ### Build, Deployment & Security * Webpack and Vite * Babel transpilation * Dockerization * CI/CD pipelines * Deployment to Vercel, Netlify, AWS Amplify * XSS, CSRF, and secure patterns for React apps *** # Start Learning Choose a topic below to begin your React learning journey. Strengthen your foundation with modern JavaScript and TypeScript. Learn the fundamentals and internal working principles of React. Master hooks, local state, global state, and state management libraries. Build performant, scalable, and well-tested React applications. Learn architecture, SSR, deployment, and advanced React ecosystem tools.