React

This 20-hour plan covers the 20% of React that appears in 80% of interviews and production code: hooks, state management, reconciliation, performance, and component patterns. Next.js is introduced in session 9 as it is now the standard production deployment target. Skipped: React Native, CSS-in-JS libraries, Redux (covered only conceptually), React Testing Library details. These are important in specific roles but not universal React fundamentals. React Mental Model: Components, JSX, and the Virtual DOM React's fundamental insight: UI is a function of state. Given the same state, the UI should look the same every time. This functional model makes UI predictable and testable. UI = f(state) JSX is Just JavaScript JSX is syntactic sugar that compiles to calls: The Virtual DOM React maintains a lightweight JavaScript representation of the DOM (the "virtual DOM"). When state changes: React calls your component function to get the new virtual DOM tree React diffs the new tree against the previous tree (reconciliation) React computes the minimal set of real DOM operations needed React commits those changes to the actual DOM Why the Virtual DOM? Direct DOM manipulation is expensive. triggers layout calculations; causes full re-parses. React batches all changes and applies them in one pass, minimizing browser reflows. Reconciliation and Keys React uses keys to efficiently reconcile lists: Component Types Interview Q&A Q: What is the virtual DOM and why does React use it? A: The virtual DOM is a lightweight JavaScript object tree that mirrors the real DOM structure. When state changes, React creates a new VDOM tree, diffs it against the previous one (O(n) with React's heuristics), and applies only the minimal set of changes to the real DOM. This batching of DOM operations is more efficient than directly manipulating the DOM on each state change, which would cause excessive reflows and repaints. Q: What is reconciliation? A: Reconciliation is React's algorithm for determining what changed between VDOM renders and how to efficiently update the real DOM. React uses two heuristics: (1) elements of different types produce completely different trees (no attempt to reuse); (2) props help identify which items in a list changed, were added, or were removed, enabling efficient list updates. Q: Why shouldn't you use array index as a React key? A: When items are reordered, filtered, or prepended, index-based keys cause React to incorrectly match elements. React will re-render and re-create components unnecessarily because the key changed, even though the data is the same — just in a different position. Use stable, unique identifiers (database IDs, UUIDs) as keys. Common Mistakes Python Implementation Java Implementation