- Preface i
-
1 React Mental Model, Rendering, and Interview Strategy 2
- 1.1 Key Concepts 2
- 1.2 Interview Perspective 3
- 1.3 How React Thinks versus How DOM Manipulation Thinks 3
- 1.4 Components as Pure Descriptions of UI 4
- 1.5 Props, State, and Rendering Inputs 6
- 1.6 Render Phase versus Commit Phase 8
- 1.7 Reconciliation and Why Keys Matter 9
- 1.8 Component Identity and State Preservation 11
- 1.9 State Reset Patterns 12
- 1.10 Parent and Child Rendering Behavior 14
- 1.11 Immutability and Why Mutation Causes Bugs 15
- 1.12 Batching and Update Timing 17
- 1.13 Conditional Rendering Pitfalls 18
- 1.14 List Rendering and Key Pitfalls 19
- 1.15 Strict Mode as a Development Tool 20
- 1.16 Debugging Unexpected Renders 21
- 1.17 Senior-Level Tradeoffs 24
- 1.18 Interview Question Bank 25
- 1.19 Mini Exercises 28
- 1.20 Quick Review Checklist 29
- 1.21 Chapter Summary 29
-
2 TypeScript Fundamentals for React Developers 31
- 2.1 Key Concepts 31
- 2.2 Interview Perspective 31
- 2.3 Why TypeScript Matters in React 32
- 2.4 Compile-Time Safety versus Runtime Reality 32
- 2.5 unknown, any, and Safe Boundaries 33
- 2.6 Narrowing and Honest State Modeling 36
- 2.7 Generics That Preserve Relationships 38
- 2.8 Utility Types, Mapped Types, and Safer Refactors 39
- 2.9 Literal Preservation, satisfies, and Widening Control 41
- 2.10 Assertions and Escape Hatches 43
- 2.11 Compiler Strictness and Team Standards 44
- 2.12 Debugging and Scenario Prompts 45
- 2.13 Senior-Level Tradeoffs 47
- 2.14 Mini Exercises 48
- 2.15 Quick Review Checklist 49
- 2.16 Chapter Summary 50
-
3 Typing Props, JSX, Components, and Composition 52
- 3.1 Key Concepts 52
- 3.2 Interview Perspective 52
- 3.3 Why Component APIs Matter in Real React Apps 53
- 3.4 Components as Typed Contracts 54
- 3.5 Props as Public APIs 55
- 3.6 Inline Props versus Named Prop Types 55
- 3.7 Interface versus Type for Props 56
- 3.8 Optional Props and Defaults 57
- 3.9 Typing Children 58
- 3.10 Event and Callback Props 60
- 3.11 Composition over Configuration 61
- 3.12 Discriminated Union Props 62
- 3.13 Mutually Exclusive Prop Patterns 64
- 3.14 Generic Components 65
- 3.15 Render Props and Function-as-Child Patterns 67
- 3.16 Polymorphic Component Concepts 68
- 3.17 Component Extraction and API Design 69
- 3.18 Presentational versus Container Boundaries 70
- 3.19 Prop Spreading and Rest Props 71
- 3.20 React.FC and Similar Footguns 72
- 3.21 Common Bugs and Interview Pitfalls 73
- 3.22 Debugging Prop and Type Errors 74
- 3.23 Senior-Level Tradeoffs 76
- 3.24 Interview Question Bank 77
- 3.25 Mini Exercises 79
- 3.26 Quick Review Checklist 80
- 3.27 Chapter Summary 81
-
4 State, Events, and Controlled UI Patterns 82
- 4.1 Interview Perspective 82
- 4.2 State as a Snapshot 82
- 4.3 State Updates and Render Scheduling 83
- 4.4 Typing useState 86
- 4.5 Inference Versus Explicit Generics 87
- 4.6 Nullable and Optional State 88
- 4.7 Object and Array State 89
- 4.8 Immutability and Update Patterns 92
- 4.9 Functional Updates 92
- 4.10 Stale State Bugs 93
- 4.11 Typing Events 94
- 4.12 Controlled Inputs 95
- 4.13 Controlled Forms 96
- 4.14 Lifting State 98
- 4.15 Derived State 99
- 4.16 Duplicated State and Normalization 100
- 4.17 State Reset Patterns 102
- 4.18 Designing Local UI State 104
- 4.19 Debugging State Bugs 105
- 4.20 Senior-Level Tradeoffs 107
- 4.21 Interview Question Bank 108
- 4.22 Debugging and Scenario Questions 111
- 4.23 Mini Exercises 114
- 4.24 Quick Review Checklist 115
- 4.25 Chapter Summary 115
-
5 Effects, Data Fetching, and Async UI Flow 117
- 5.1 Interview Perspective 117
- 5.2 Effects as Synchronization 118
- 5.3 What Effects Are Not For 119
- 5.4 Reactive Values and Dependency Arrays 120
- 5.5 Cleanup Functions 123
- 5.6 Subscriptions and Timers 126
- 5.7 Stale Closures 126
- 5.8 Race Conditions 128
- 5.9 AbortController and Request Cancellation 130
- 5.10 Data Fetching State Models 132
- 5.11 Loading, Error, Empty, and Success States 133
- 5.12 Async State with Discriminated Unions 135
- 5.13 Async Event Handlers 135
- 5.14 Strict Mode and Double Effect Execution in Development 137
- 5.15 Avoiding Unnecessary Effects 138
- 5.16 Derived Data Without Effects 139
- 5.17 Production Data Fetching Tradeoffs 140
- 5.18 Debugging Effect Bugs 141
- 5.19 Senior-Level Tradeoffs 142
- 5.20 Interview Question Bank 143
- 5.21 Debugging and Scenario Questions 146
- 5.22 Mini Exercises 149
- 5.23 Quick Review Checklist 150
- 5.24 Chapter Summary 151
-
6 Hooks Deep Dive, Custom Hooks, Reuse, and Pitfalls 152
- 6.1 Interview Perspective 152
- 6.2 Why Hooks Exist 152
- 6.3 Rules of Hooks 153
- 6.4 Hook Call Order 155
- 6.5 Stateful Logic Reuse 156
- 6.6 useState Versus useReducer 157
- 6.7 useRef for DOM Refs and Mutable Values 159
- 6.8 useMemo and useCallback 162
- 6.9 Memoization Tradeoffs 164
- 6.10 Dependency Arrays and Stale Closures 165
- 6.11 Custom Hook Design 166
- 6.12 Composing Hooks 168
- 6.13 Typing Custom Hooks 170
- 6.14 Tuple Returns Versus Object Returns 173
- 6.15 Reusable Logic Versus Reusable UI 173
- 6.16 Testing Custom Hooks 174
- 6.17 Hook Anti-Patterns 175
- 6.18 Debugging Hook Bugs 176
- 6.19 Senior-Level Tradeoffs 178
- 6.20 Interview Question Bank 179
- 6.21 Debugging and Scenario Questions 181
- 6.22 Mini Exercises 183
- 6.23 Quick Review Checklist 185
- 6.24 Chapter Summary 185
-
7 Forms, Validation, and Accessibility 187
- 7.1 Interview Perspective 187
- 7.2 Why Forms Are Harder Than They Look 187
- 7.3 Controlled Versus Uncontrolled Forms 189
- 7.4 Typing Form State 192
- 7.5 Typing Input and Submit Events 193
- 7.6 Form Submission Flow 194
- 7.7 Field-Level Validation 196
- 7.8 Form-Level Validation 197
- 7.9 Client-Side Versus Server-Side Validation 199
- 7.10 Validation Timing and UX 199
- 7.11 Touched, Dirty, Submitted, and Pending States 201
- 7.12 Accessible Labels and Descriptions 203
- 7.13 Accessible Error Messages 204
- 7.14 aria-invalid and aria-describedby 205
- 7.15 Live Regions and Announcements 207
- 7.16 Focus Management 208
- 7.17 Keyboard Accessibility 209
- 7.18 Server Error Mapping 210
- 7.19 Reducer-Based Form State 212
- 7.20 When to Use a Form Library 213
- 7.21 Debugging Form Bugs 214
- 7.22 Senior-Level Tradeoffs 215
- 7.23 Interview Question Bank 217
- 7.24 Debugging and Scenario Questions 219
- 7.25 Mini Exercises 222
- 7.26 Quick Review Checklist 223
- 7.27 Chapter Summary 223
-
8 Context, Reducers, and State Management Boundaries 226
- 8.1 Interview Perspective 226
- 8.2 The State Ownership Problem 227
- 8.3 Local State, Lifted State, and Shared State 228
- 8.4 Prop Drilling Tradeoffs 229
- 8.5 Composition as a State-Boundary Tool 230
- 8.6 What Context Is and Is Not 231
- 8.7 Context Performance and Re-render Behavior 233
- 8.8 Typing Context Safely 235
- 8.9 Provider Design 237
- 8.10 Splitting State and Dispatch Contexts 238
- 8.11 useReducer for Complex State 239
- 8.12 Typing Reducer Actions with Discriminated Unions 241
- 8.13 Exhaustiveness Checking with never 242
- 8.14 Avoiding Impossible UI States 243
- 8.15 UI State Versus Server State 246
- 8.16 Lightweight State Machines 248
- 8.17 External Stores and Library Boundaries 249
- 8.18 Debugging State-Management Bugs 251
- 8.19 Senior-Level Tradeoffs 252
- 8.20 Interview Question Bank 254
- 8.21 Debugging and Scenario Questions 258
- 8.22 Mini Exercises 261
- 8.23 Quick Review Checklist 262
- 8.24 Chapter Summary 263
-
9 Routing, Navigation, and Application Structure 264
- 9.1 Interview Perspective 264
- 9.2 Routing as Application Architecture 265
- 9.3 Client-Side Routing Mental Model 266
- 9.4 Routes, Pages, and Layouts 267
- 9.5 Route Params as External String Input 268
- 9.6 Search Params and URL State 270
- 9.7 Nested Routes and Layout Boundaries 272
- 9.8 Index Routes and Fallback Routes 274
- 9.9 Programmatic Navigation 275
- 9.10 Navigation State 276
- 9.11 Protected Routes and Role-Based Route Access 277
- 9.12 Lazy-Loaded Routes 280
- 9.13 Error and Not-Found Routes 281
- 9.14 Route-Level Data Loading Concepts 282
- 9.15 Page Components Versus Feature Components 283
- 9.16 Feature-Based Route Organization 284
- 9.17 Typed Route Utilities and Path Building 286
- 9.18 Debugging Routing Bugs 287
- 9.19 Senior-Level Tradeoffs 287
- 9.20 Interview Question Bank 289
- 9.21 Debugging and Scenario Questions 293
- 9.22 Mini Exercises 295
- 9.23 Quick Review Checklist 297
- 9.24 Chapter Summary 297
-
10 Server State, Caching, and API Integration Patterns 298
- 10.1 Interview Perspective 298
- 10.2 Server State Versus Client State 299
- 10.3 API Boundaries and DTOs 300
- 10.4 Runtime Validation at API Boundaries 301
- 10.5 Loading, Error, Empty, and Success Models 302
- 10.6 Caching Mental Model 304
- 10.7 Cache Keys 305
- 10.8 Cache Invalidation 306
- 10.9 Stale Data and Refetching 307
- 10.10 Request Deduplication 308
- 10.11 Race Conditions and Request Identity 309
- 10.12 Mutations and Optimistic Updates 310
- 10.13 Pagination, Filtering, and Sorting 312
- 10.14 API Client Design 314
- 10.15 Error Normalization 315
- 10.16 Retry Strategy 316
- 10.17 Auth and Token Handling Boundaries 317
- 10.18 Query Libraries and Framework Data Loading 318
- 10.19 Senior-Level Tradeoffs 320
- 10.20 Interview Question Bank 322
- 10.21 Debugging and Scenario Questions 325
- 10.22 Mini Exercises 328
- 10.23 Quick Review Checklist 329
- 10.24 Chapter Summary 330
-
11 Styling Systems, Design Systems, and Frontend Architecture 331
- 11.1 Interview Perspective 331
- 11.2 Styling Is an Architecture Decision 332
- 11.3 Local Styles, Global Styles, and CSS Cascade Risk 333
- 11.4 CSS Modules 333
- 11.5 Utility-First CSS 334
- 11.6 CSS-in-JS Concepts 335
- 11.7 Component Style APIs 336
- 11.8 Design Tokens 337
- 11.9 Themes and Dark Mode 338
- 11.10 Responsive Design 339
- 11.11 Accessibility and Styling 340
- 11.12 Variants and Component APIs 341
- 11.13 Reusable UI Primitives 342
- 11.14 Design-System Boundaries 343
- 11.15 Feature Components Versus Shared UI Components 344
- 11.16 Frontend Folder Architecture 345
- 11.17 Styling Performance and Bundle Size 346
- 11.18 Debugging Styling and Architecture Bugs 347
- 11.19 Senior-Level Tradeoffs 348
- 11.20 Interview Question Bank 349
- 11.21 Debugging and Scenario Questions 352
- 11.22 Mini Exercises 355
- 11.23 Quick Review Checklist 356
- 11.24 Chapter Summary 357
-
12 Performance, Memoization, and Rendering Optimization 359
- 12.1 Interview Perspective 359
- 12.2 Performance Mental Model 360
- 12.3 Rendering Cost Versus DOM Updates 361
- 12.4 Measure Before Optimizing 362
- 12.5 Unnecessary Re-renders 364
- 12.6 React.memo 365
- 12.7 useMemo 366
- 12.8 useCallback 369
- 12.9 Stable References and Dependency Design 370
- 12.10 Expensive Derived Calculations 372
- 12.11 Lists, Keys, and Rendering Cost 373
- 12.12 Virtualization 375
- 12.13 Lazy Loading and Code Splitting 376
- 12.14 Suspense Basics 377
- 12.15 Bundle Size and Dependency Cost 378
- 12.16 Profiling and Performance Debugging 380
- 12.17 Avoiding Premature Optimization 381
- 12.18 TypeScript Patterns for Performance-Sensitive APIs 381
- 12.19 Senior-Level Tradeoffs 383
- 12.20 Interview Question Bank 384
- 12.21 Debugging and Scenario Questions 388
- 12.22 Mini Exercises 391
- 12.23 Quick Review Checklist 392
- 12.24 Chapter Summary 393
-
13 Testing React Applications 394
- 13.1 Interview Perspective 394
- 13.2 Testing Philosophy for React Applications 395
- 13.3 Behavior Testing Versus Implementation Testing 396
- 13.4 Unit, Integration, and End-to-End Testing Boundaries 398
- 13.5 Testing Components from the User Perspective 399
- 13.6 Testing Props, State, and Events 399
- 13.7 Testing Forms and Validation 400
- 13.8 Testing Accessibility Expectations 402
- 13.9 Testing Async UI 403
- 13.10 Testing Loading, Error, Empty, and Success States 405
- 13.11 Mocking APIs and Network Boundaries 406
- 13.12 Testing Server-State Behavior 407
- 13.13 Testing Custom Hooks 408
- 13.14 Testing Reducers and Pure Logic 409
- 13.15 Fake Timers and Time-Based Behavior 411
- 13.16 Avoiding Brittle Tests 412
- 13.17 Test Data Builders and Helpers 413
- 13.18 TypeScript Patterns for Tests 414
- 13.19 Debugging Failing Tests 415
- 13.20 Senior-Level Tradeoffs 416
- 13.21 Interview Question Bank 418
- 13.22 Debugging and Scenario Questions 421
- 13.23 Mini Exercises 424
- 13.24 Quick Review Checklist 425
- 13.25 Chapter Summary 426
-
14 Security, Deployment, and Observability in Frontend Apps 427
- 14.1 Interview Perspective 427
- 14.2 Security Mindset for Frontend Developers 428
- 14.3 XSS and Safe Rendering 429
- 14.4 dangerouslySetInnerHTML and Sanitization Boundaries 430
- 14.5 Token Storage Tradeoffs 431
- 14.6 Auth Boundaries and Frontend Responsibility 432
- 14.7 CORS Misconceptions 434
- 14.8 CSRF Concepts 435
- 14.9 Content Security Policy 435
- 14.10 Dependency and Supply-Chain Risk 436
- 14.11 Environment Configuration 437
- 14.12 Build-Time vs Runtime Configuration 438
- 14.13 Secrets Do Not Belong in Frontend Bundles 439
- 14.14 Deployment Models for React Apps 440
- 14.15 Static Hosting vs Containerized Frontend 441
- 14.16 Cache Headers and Asset Versioning 441
- 14.17 Rollback Strategy 443
- 14.18 Feature Flags and Gradual Rollout 443
- 14.19 Error Boundaries and Production Fallback UI 444
- 14.20 Client-Side Logging and Telemetry 445
- 14.21 Frontend Observability 447
- 14.22 Release Validation and Smoke Tests 448
- 14.23 Debugging Production Issues 449
- 14.24 Senior-Level Tradeoffs 450
- 14.25 Interview Question Bank 451
- 14.26 Debugging and Scenario Questions 456
- 14.27 Mini Exercises 459
- 14.28 Quick Review Checklist 460
- 14.29 Chapter Summary 461
-
15 React System Design, Tradeoffs, and Troubleshooting Scenarios 463
- 15.1 Interview Perspective 463
- 15.2 How to Clarify Requirements 464
- 15.3 Functional vs Non-Functional Requirements 465
- 15.4 Choosing Application Boundaries 466
- 15.5 Component and Route Architecture 467
- 15.6 State Ownership Decisions 468
- 15.7 Server-State and Cache Strategy 470
- 15.8 Forms and Validation Strategy 471
- 15.9 Error Handling and Fallback Strategy 472
- 15.10 Performance Strategy 473
- 15.11 Accessibility Strategy 474
- 15.12 Security Strategy 475
- 15.13 Observability and Production Debugging Strategy 476
- 15.14 Deployment and Rollback Strategy 477
- 15.15 Tradeoff Communication 478
- 15.16 Troubleshooting Methodology 479
- 15.17 Capstone Scenario 1: Event Registration or Booking Flow 481
- 15.18 Capstone Scenario 2: Admin Dashboard or Data-Heavy App 484
- 15.19 Capstone Scenario 3: Payment or Checkout-Style Flow 486
- 15.20 Capstone Scenario 4: Real-Time or Collaborative UI 487
- 15.21 Senior-Level Interview Question Bank 489
- 15.22 Debugging and Scenario Questions 493
- 15.23 Mini Exercises 497
- 15.24 Final Review Checklist 498
- 15.25 Chapter Summary 499
- Conclusion 500
The React and TypeScript Interview Compendium
Interview Questions and Answers for React and TypeScript Developers
A practical frontend interview reference covering modern React and TypeScript development (517 manuscript pages).
Minimum price
$19.99
$29.99
You pay
Author earns
PDF
About
About the Book
React and TypeScript interviews reward precise mental models more than API trivia. Interviewers want to hear what React does when a component runs, who owns a piece of state, where a type stops protecting you, and what you would measure before you optimized anything.
The React and TypeScript Interview Compendium is a structured reference for developers who already know the basics and want sharper answers for mid-level and senior interviews. It contains more than a thousand questions across fifteen chapters, each tied to the reasoning an interviewer is listening for.
The book moves from the React rendering model and TypeScript for React developers, through components, state, effects, hooks, and forms, to context, routing, server state, styling, performance, testing, and frontend security, deployment, and observability. It closes with senior scenarios: a method for turning a vague design prompt into a bounded answer, four capstone designs, and a way to troubleshoot production problems.
Most chapters pair a weak answer with a strong one, then give each question an outline of a good answer, a note on what the interviewer is testing, and the mistake candidates most often make. Code walkthroughs, tradeoff discussions, debugging scenarios, exercises with solution sketches, and a review checklist complete each chapter.
The book teaches concepts rather than one ecosystem. It explains the underlying problem first, such as cache identity, cancellation, or scope, and treats any specific library as one way to solve it, so the reasoning still holds when your team's tools change.
Feedback
Author
About the Author
Yohan Rodriguez
Yohan is a Senior Full-Stack Software Engineer with extensive experience delivering scalable, end-to-end software solutions across web, enterprise, and cloud-based environments. He specializes in architecting robust platforms, modernizing legacy systems, driving cloud transformation efforts, and building integration-heavy applications that support critical business workflows. He is recognized for translating complex requirements into reliable, maintainable, and high-value solutions across industries such as insurance, cybersecurity, and professional services.
Known for combining strong technical execution with a practical business mindset, he has contributed to projects from concept and design through production delivery and long-term support. His experience includes collaborating with cross-functional teams, improving development workflows, solving complex technical challenges, and helping organizations deliver dependable software products that adapt to changing business needs. He brings a balanced approach to engineering that values quality, efficiency, and continuous improvement.
Contents
Table of Contents
Get the free sample chapters
Click the buttons to get the free sample in PDF or EPUB, or read the sample online here
The Leanpub 60 Day 100% Happiness Guarantee
Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.
See full terms...
Earn $8 on a $10 Purchase, and $16 on a $20 Purchase
We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.
(Yes, some authors have already earned much more than that on Leanpub.)
In fact, authors have earned over $15 million writing, publishing and selling on Leanpub.
Learn more about writing on Leanpub
Free Updates. DRM Free.
If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).
Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.
Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.
Learn more about Leanpub's ebook formats and where to read them
Write and Publish on Leanpub
You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!
Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.
Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.