Master modern React from foundational mental models to production-grade engineering patterns. Understand how React works under the hood (Virtual DOM, reconciliation, JSX compilation), modern Vite tooling, and the skills expected from top frontend engineers.
The Paradigm Shift: Declarative UI, Facebook's 2013 Scale Crisis & UI = f(state)
Virtual DOM, Reconciliation, Diffing Algorithms & Batch Updates Under the Hood
Tree Hierarchies, Unidirectional Data Flow & The Modern React Landscape
Library vs Full Framework vs Progressive, Reactivity Models & Enterprise Trade-offs
Runtimes, Package Registries, Dependency Trees, CJS vs ESM & Lockfile Integrity
Why Create-React-App is Obsolete: Native ESM, esbuild, Hot Module Replacement (HMR) & Vite Config
Root Entry Points, createRoot, Public Assets & Production-Ready Directory Patterns
Vite Dev Server, Tree-Shaking, Asset Hashing, Code Splitting & Safe Environment Configuration
Functions as UI Blueprints, JSX Compilation, React Elements & _jsx Runtime
Attribute Transposition, camelCase, Reserved Keywords, Self-Closing Tags & Root Element Constraints
Embedding JavaScript, Boolean Coercion, Avoiding the 0 && <Component> Bug & List Iteration Keys
Preventing Div Soup, Function Return Constraints, Keyed <React.Fragment> & Accessibility
Props, children, Containment, Specialization, Slot Inversion of Control & Prop Drilling Avoidance
Component Contracts, Parameter Destructuring, Default Values & Props vs State
Ternaries, Logical AND, Early Returns, Guard Clauses & Component Lookup Tables
Array.map() Transformation, Fiber Key Matching & The Index-as-Key Trap
The 5 Core UI States, Perceived Performance, Content-Shaped Skeletons & Actionable Fallbacks
Closures, Stale State In Snapshots, Batching Updates & Functional Updaters
SyntheticEvent Wrapper, Delegation on Root, Propagation, Capturing & Passing Arguments
Controlled vs Uncontrolled, Single Generic Change Handler, Checkboxes, Radios & Validation
Single Source of Truth, Redundant State Anti-Patterns & Sibling State Synchronization
Synchronization vs Lifecycle, Dependency Referential Equality, Cleanups & Infinite Loops
Refs vs State, Escape Hatches, Focus Management & Storing Previous Values
Extracting Business Logic, Hook Composition, useFetch, useDebounce & useLocalStorage
Performance Optimization, Memory Overhead, Profiling & Referential Stability
Function Closures, Why Functions Break React.memo, useCallback vs useMemo & Dependency Traps
Shallow Comparison, arePropsEqual, When Memoization Hurts & Avoiding Premature Optimization
Fiber WorkLoop, Reconciliation Scheduling, Layout Effects & Browser Paint Pipeline
Tree Positions, Component Type Matching, Resetting State via Key & State Preservation
Component Tree Cascades, Object Reference Traps, React DevTools Profiler & Why Did You Render
Decoupling API Logic, Typed Axios/Fetch Wrappers, Response DTOs & Retry Mechanisms
Out-of-Order Responses, Async Overlaps, AbortSignal & Fetch Cancellation
Offset/Limit, Cursor-Based Pagination, IntersectionObserver & Infinite Feed Virtualization
Zero-Latency User Experience, Snapshot Rollback on Server Failure & Mutation Queuing
Context Hell, Consumer Re-render Pitfalls, Splitting State/Dispatch & Context vs Zustand
SPA History API, Route Matching, Dynamic Params, Search Parameters & Nested Layouts
Token Storage, HttpOnly Cookies, Auth Context, Protected Route Guards & Return URLs
Roles, Permissions, Feature Gating with <Can /> Components & UI vs Server Security