React Articles & Machine Coding Guides
Each topic now starts from a clearer top-level structure, so readers can scan faster, learn in sequence, and stay focused on the concept instead of the layout.
Overview
React — Course Overview
This series covers 46 topics organized into 7 phases — from React fundamentals to advanced interview patterns. Use this page as your roadmap: work through each phase in order, or jump directly to any topic.
Phase 1 — React Foundations
Core concepts every React developer must know before building anything real. Start here to develop the right mental model.
Setup & Tooling
Create React App, Vite, Node.js setup, project structureJSX & Rendering
JSX syntax, expressions, fragments, how React renders to the DOMComponents (Functional & Class)
Functional vs class components, when to use eachProps
Passing data down, prop types, default props, children propState & useState
Local state, useState hook, state updates, and batchingEvent Handling
onClick, onChange, synthetic events, binding patternsForm Handling
Controlled inputs, validation patterns, useForm hook, React Hook FormConditional Rendering
&& operator, ternary, early return patternsLists & Keys
Rendering arrays, why keys matter, key stabilityPhase 2 — Core Mechanics
How React really works under the hood. Understanding these topics makes you reason about bugs instead of guessing.
How Re-rendering Works
What triggers re-renders, batching, and how to prevent unnecessary onesuseEffect & Lifecycle
Side effects, dependency array, cleanup, componentDidMount equivalentRefs
useRef for DOM access, mutable values, forwardRefContext API
createContext, useContext, avoiding prop drillingVirtual DOM & Reconciliation
Diffing algorithm, fiber tree, how React minimizes DOM updatesReact Fiber
Concurrent rendering, priority scheduling, time-slicing internalsPhase 3 — Hooks & Patterns
Hooks are the backbone of modern React. Master the built-in hooks and learn to build your own.
Hooks
useState, useEffect, useReducer, useMemo, useCallback — the full setCustom Hooks
Extracting logic into reusable hooks, naming conventions, best practicesDesign Patterns
Compound components, render props, HOCs, controlled vs uncontrolledComponent Architecture
Container/presenter split, co-location, feature foldersPhase 4 — Real-World React
Topics you encounter in every production app — routing, data fetching, state management, and styling.
React Router
BrowserRouter, Route, Link, useNavigate, nested routes, protected routesAuth & Protected Routes
JWT flow, PrivateRoute pattern, storing tokens safelyData Fetching
fetch, Axios, React Query, loading/error states, cachingState Management
Context vs Redux vs Zustand — when each is appropriateStyling
CSS modules, styled-components, Tailwind, MUI — patterns and trade-offsPhase 5 — Advanced & Interview Topics
Performance, testing, debugging, and the newest React features. These topics separate mid-level from senior.
Performance Optimization
React.memo, useMemo, useCallback, lazy loading, code splittingError Boundaries
componentDidCatch, getDerivedStateFromError, fallback UIReact Debugging Techniques
React DevTools, StrictMode, profiler, common mistake patternsTesting
Jest, React Testing Library — unit, integration, and snapshot testsCI/CD
GitHub Actions, Vercel deploys, lint gates, automated test runsReact 19 Special
Actions, useFormStatus, useOptimistic, Server Components overviewPhase 6 — Advanced Interview Q&A
The questions that separate Senior from Staff at Meta, Google, Amazon, and Microsoft — internals, system design, modern React 18/19 APIs, and architecture decisions. Each answer is expandable with code.
Advanced Interview Q&A
20 FAANG-level questions: Fiber, Concurrent Mode, RSC, micro-frontends, useSyncExternalStore, hydration, and morePhase 7 — Machine Coding Problems
Hands-on builds that mirror real interview rounds. Each problem covers design thinking, state modeling, and clean React code.
How to Approach MCP
5-phase framework: Requirements → Scoping → Tech Choice → Architecture → Data/APIMCP1 - Todo App
Add, toggle, delete, inline edit — useState fundamentalsMCP2 - Counter App
Simple state, increment/decrement, resetMCP3 - Form Validation
Controlled inputs, field-level validation, submit gatingMCP4 - Search & Filter
Debounced search, useMemo filtered list, empty stateMCP5 - Theme Switcher
Context-based theming, dark/light toggle, persistenceMCP6 - Timer with Hooks
setInterval in useEffect, cleanup, start/pause/resetMCP7 - API Integration
AbortController, loading/error/data states, fetch lifecycleMCP8 - TIC TAC TOE
Game state, win detection, board renderingMCP9 - Calculator
Expression string state, eval with try/catch, keypad gridMCP10 - Infinite Scroller
IntersectionObserver, page accumulation, loading sentinelMCP11 - Pagination
Page slice, prev/next controls, page countMCP12 - VS Code File Explorer
Recursive tree, add/rename/delete/edit file & folderMCP13 - Instagram Post Like & Comment
Optimistic like toggle, comment composer, append stateMCP14 - Create Gmail
Three-pane layout, compose form, draft/send flow