- 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 15
- 1.11 Immutability and Why Mutation Causes Bugs 17
- 1.12 Batching and Update Timing 19
- 1.13 Conditional Rendering Pitfalls 20
- 1.14 List Rendering and Key Pitfalls 21
- 1.15 Strict Mode as a Development Tool 22
- 1.16 Debugging Unexpected Renders 23
- 1.17 Senior-Level Tradeoffs 26
- 1.18 Interview Question Bank 27
- 1.19 Mini Exercises 30
- 1.20 Quick Review Checklist 31
- 1.21 Chapter Summary 31
-
2 TypeScript Fundamentals for React Developers 33
- 2.1 Key Concepts 33
- 2.2 Interview Perspective 33
- 2.3 Why TypeScript Matters in React 34
- 2.4 Compile-Time Safety versus Runtime Reality 34
- 2.5 unknown, any, and Safe Boundaries 35
- 2.6 Narrowing and Honest State Modeling 38
- 2.7 Generics That Preserve Relationships 40
- 2.8 Utility Types, Mapped Types, and Safer Refactors 41
- 2.9 Literal Preservation, satisfies, and Widening Control 43
- 2.10 Assertions and Escape Hatches 45
- 2.11 Compiler Strictness and Team Standards 46
- 2.12 Debugging and Scenario Prompts 47
- 2.13 Senior-Level Tradeoffs 49
- 2.14 Mini Exercises 50
- 2.15 Quick Review Checklist 51
- 2.16 Chapter Summary 52
-
3 Typing Props, JSX, Components, and Composition 54
- 3.1 Key Concepts 54
- 3.2 Interview Perspective 54
- 3.3 Why Component APIs Matter in Real React Apps 55
- 3.4 Components as Typed Contracts 56
- 3.5 Props as Public APIs 57
- 3.6 Inline Props versus Named Prop Types 57
- 3.7 Interface versus Type for Props 58
- 3.8 Optional Props and Defaults 59
- 3.9 Typing Children 60
- 3.10 Event and Callback Props 62
- 3.11 Composition over Configuration 63
- 3.12 Discriminated Union Props 64
- 3.13 Mutually Exclusive Prop Patterns 66
- 3.14 Generic Components 68
- 3.15 Render Props and Function-as-Child Patterns 69
- 3.16 Polymorphic Component Concepts 71
- 3.17 Component Extraction and API Design 72
- 3.18 Presentational versus Container Boundaries 72
- 3.19 Prop Spreading and Rest Props 74
- 3.20 React.FC and Similar Footguns 75
- 3.21 Common Bugs and Interview Pitfalls 75
- 3.22 Debugging Prop and Type Errors 77
- 3.23 Senior-Level Tradeoffs 79
- 3.24 Interview Question Bank 80
- 3.25 Mini Exercises 82
- 3.26 Quick Review Checklist 83
- 3.27 Chapter Summary 84
-
4 State, Events, and Controlled UI Patterns 85
- 4.1 Interview Perspective 85
- 4.2 State as a Snapshot 85
- 4.3 State Updates and Render Scheduling 86
- 4.4 Typing useState 89
- 4.5 Inference Versus Explicit Generics 91
- 4.6 Nullable and Optional State 91
- 4.7 Object and Array State 93
- 4.8 Immutability and Update Patterns 96
- 4.9 Functional Updates 97
- 4.10 Stale State Bugs 97
- 4.11 Typing Events 98
- 4.12 Controlled Inputs 99
- 4.13 Controlled Forms 100
- 4.14 Lifting State 102
- 4.15 Derived State 103
- 4.16 Duplicated State and Normalization 105
- 4.17 State Reset Patterns 107
- 4.18 Designing Local UI State 109
- 4.19 Debugging State Bugs 111
- 4.20 Senior-Level Tradeoffs 112
- 4.21 Interview Question Bank 113
- 4.22 Debugging and Scenario Questions 117
- 4.23 Mini Exercises 119
- 4.24 Quick Review Checklist 120
- 4.25 Chapter Summary 121
-
5 Effects, Data Fetching, and Async UI Flow 122
- 5.1 Interview Perspective 122
- 5.2 Effects as Synchronization 123
- 5.3 What Effects Are Not For 124
- 5.4 Reactive Values and Dependency Arrays 126
- 5.5 Cleanup Functions 128
- 5.6 Subscriptions and Timers 131
- 5.7 Stale Closures 131
- 5.8 Race Conditions 133
- 5.9 AbortController and Request Cancellation 137
- 5.10 Data Fetching State Models 138
- 5.11 Loading, Error, Empty, and Success States 140
- 5.12 Async State with Discriminated Unions 141
- 5.13 Async Event Handlers 142
- 5.14 Strict Mode and Double Effect Execution in Development 143
- 5.15 Avoiding Unnecessary Effects 145
- 5.16 Derived Data Without Effects 145
- 5.17 Production Data Fetching Tradeoffs 146
- 5.18 Debugging Effect Bugs 147
- 5.19 Senior-Level Tradeoffs 148
- 5.20 Interview Question Bank 149
- 5.21 Debugging and Scenario Questions 153
- 5.22 Mini Exercises 155
- 5.23 Quick Review Checklist 157
- 5.24 Chapter Summary 157
-
6 Hooks Deep Dive, Custom Hooks, Reuse, and Pitfalls 159
- 6.1 Interview Perspective 159
- 6.2 Why Hooks Exist 159
- 6.3 Rules of Hooks 160
- 6.4 Hook Call Order 162
- 6.5 Stateful Logic Reuse 163
- 6.6 useState Versus useReducer 164
- 6.7 useRef for DOM Refs and Mutable Values 166
- 6.8 useMemo and useCallback 169
- 6.9 Memoization Tradeoffs 171
- 6.10 Dependency Arrays and Stale Closures 172
- 6.11 Custom Hook Design 174
- 6.12 Composing Hooks 176
- 6.13 Typing Custom Hooks 178
- 6.14 Tuple Returns Versus Object Returns 181
- 6.15 Reusable Logic Versus Reusable UI 182
- 6.16 Testing Custom Hooks 182
- 6.17 Hook Anti-Patterns 183
- 6.18 Debugging Hook Bugs 185
- 6.19 Senior-Level Tradeoffs 186
- 6.20 Interview Question Bank 187
- 6.21 Debugging and Scenario Questions 189
- 6.22 Mini Exercises 192
- 6.23 Quick Review Checklist 193
- 6.24 Chapter Summary 194
-
7 Forms, Validation, and Accessibility 195
- 7.1 Interview Perspective 195
- 7.2 Why Forms Are Harder Than They Look 195
- 7.3 Controlled Versus Uncontrolled Forms 197
- 7.4 Typing Form State 201
- 7.5 Typing Input and Submit Events 202
- 7.6 Form Submission Flow 203
- 7.7 Field-Level Validation 205
- 7.8 Form-Level Validation 207
- 7.9 Client-Side Versus Server-Side Validation 209
- 7.10 Validation Timing and UX 210
- 7.11 Touched, Dirty, Submitted, and Pending States 212
- 7.12 Accessible Labels and Descriptions 214
- 7.13 Accessible Error Messages 216
- 7.14 aria-invalid and aria-describedby 218
- 7.15 Live Regions and Announcements 219
- 7.16 Focus Management 220
- 7.17 Keyboard Accessibility 222
- 7.18 Server Error Mapping 224
- 7.19 Reducer-Based Form State 225
- 7.20 When to Use a Form Library 226
- 7.21 Debugging Form Bugs 228
- 7.22 Senior-Level Tradeoffs 229
- 7.23 Interview Question Bank 230
- 7.24 Debugging and Scenario Questions 232
- 7.25 Mini Exercises 235
- 7.26 Quick Review Checklist 236
- 7.27 Chapter Summary 237
-
8 Context, Reducers, and State Management Boundaries 239
- 8.1 Interview Perspective 239
- 8.2 The State Ownership Problem 240
- 8.3 Local State, Lifted State, and Shared State 241
- 8.4 Prop Drilling Tradeoffs 242
- 8.5 Composition as a State-Boundary Tool 243
- 8.6 What Context Is and Is Not 244
- 8.7 Context Performance and Re-render Behavior 246
- 8.8 Typing Context Safely 248
- 8.9 Provider Design 250
- 8.10 Splitting State and Dispatch Contexts 251
- 8.11 useReducer for Complex State 253
- 8.12 Typing Reducer Actions with Discriminated Unions 255
- 8.13 Exhaustiveness Checking with never 256
- 8.14 Avoiding Impossible UI States 258
- 8.15 UI State Versus Server State 261
- 8.16 Lightweight State Machines 264
- 8.17 External Stores and Library Boundaries 264
- 8.18 Debugging State-Management Bugs 267
- 8.19 Senior-Level Tradeoffs 268
- 8.20 Interview Question Bank 270
- 8.21 Debugging and Scenario Questions 274
- 8.22 Mini Exercises 277
- 8.23 Quick Review Checklist 278
- 8.24 Chapter Summary 279
-
9 Routing, Navigation, and Application Structure 280
- 9.1 Interview Perspective 280
- 9.2 Routing as Application Architecture 281
- 9.3 Client-Side Routing Mental Model 282
- 9.4 Routes, Pages, and Layouts 283
- 9.5 Route Params as External String Input 284
- 9.6 Search Params and URL State 286
- 9.7 Nested Routes and Layout Boundaries 289
- 9.8 Index Routes and Fallback Routes 291
- 9.9 Programmatic Navigation 292
- 9.10 Navigation State 292
- 9.11 Protected Routes and Role-Based Route Access 294
- 9.12 Lazy-Loaded Routes 297
- 9.13 Error and Not-Found Routes 298
- 9.14 Route-Level Data Loading Concepts 299
- 9.15 Page Components Versus Feature Components 300
- 9.16 Feature-Based Route Organization 301
- 9.17 Typed Route Utilities and Path Building 303
- 9.18 Debugging Routing Bugs 304
- 9.19 Senior-Level Tradeoffs 305
- 9.20 Interview Question Bank 306
- 9.21 Debugging and Scenario Questions 310
- 9.22 Mini Exercises 313
- 9.23 Quick Review Checklist 314
- 9.24 Chapter Summary 315
-
10 Server State, Caching, and API Integration Patterns 316
- 10.1 Interview Perspective 316
- 10.2 Server State Versus Client State 317
- 10.3 API Boundaries and DTOs 318
- 10.4 Runtime Validation at API Boundaries 319
- 10.5 Loading, Error, Empty, and Success Models 320
- 10.6 Caching Mental Model 322
- 10.7 Cache Keys 323
- 10.8 Cache Invalidation 324
- 10.9 Stale Data and Refetching 325
- 10.10 Request Deduplication 326
- 10.11 Race Conditions and Request Identity 327
- 10.12 Mutations and Optimistic Updates 329
- 10.13 Pagination, Filtering, and Sorting 331
- 10.14 API Client Design 333
- 10.15 Error Normalization 334
- 10.16 Retry Strategy 335
- 10.17 Auth and Token Handling Boundaries 337
- 10.18 Query Libraries and Framework Data Loading 338
- 10.19 Senior-Level Tradeoffs 340
- 10.20 Interview Question Bank 341
- 10.21 Debugging and Scenario Questions 345
- 10.22 Mini Exercises 347
- 10.23 Quick Review Checklist 349
- 10.24 Chapter Summary 349
-
11 Styling Systems, Design Systems, and Frontend Architecture 350
- 11.1 Interview Perspective 350
- 11.2 Styling Is an Architecture Decision 351
- 11.3 Local Styles, Global Styles, and CSS Cascade Risk 352
- 11.4 CSS Modules 352
- 11.5 Utility-First CSS 353
- 11.6 CSS-in-JS Concepts 354
- 11.7 Component Style APIs 355
- 11.8 Design Tokens 356
- 11.9 Themes and Dark Mode 358
- 11.10 Responsive Design 359
- 11.11 Accessibility and Styling 360
- 11.12 Variants and Component APIs 361
- 11.13 Reusable UI Primitives 362
- 11.14 Design-System Boundaries 363
- 11.15 Feature Components Versus Shared UI Components 364
- 11.16 Frontend Folder Architecture 365
- 11.17 Styling Performance and Bundle Size 365
- 11.18 Debugging Styling and Architecture Bugs 367
- 11.19 Senior-Level Tradeoffs 367
- 11.20 Interview Question Bank 369
- 11.21 Debugging and Scenario Questions 372
- 11.22 Mini Exercises 374
- 11.23 Quick Review Checklist 376
- 11.24 Chapter Summary 376
-
12 Performance, Memoization, and Rendering Optimization 378
- 12.1 Interview Perspective 378
- 12.2 Performance Mental Model 379
- 12.3 Rendering Cost Versus DOM Updates 380
- 12.4 Measure Before Optimizing 382
- 12.5 Unnecessary Re-renders 383
- 12.6 React.memo 384
- 12.7 useMemo 386
- 12.8 useCallback 388
- 12.9 Stable References and Dependency Design 390
- 12.10 Expensive Derived Calculations 392
- 12.11 Lists, Keys, and Rendering Cost 393
- 12.12 Virtualization 395
- 12.13 Lazy Loading and Code Splitting 397
- 12.14 Suspense Basics 398
- 12.15 Bundle Size and Dependency Cost 400
- 12.16 Profiling and Performance Debugging 401
- 12.17 Avoiding Premature Optimization 402
- 12.18 TypeScript Patterns for Performance-Sensitive APIs 403
- 12.19 Senior-Level Tradeoffs 404
- 12.20 Interview Question Bank 406
- 12.21 Debugging and Scenario Questions 409
- 12.22 Mini Exercises 412
- 12.23 Quick Review Checklist 413
- 12.24 Chapter Summary 414
-
13 Testing React Applications 415
- 13.1 Interview Perspective 415
- 13.2 Testing Philosophy for React Applications 416
- 13.3 Behavior Testing Versus Implementation Testing 417
- 13.4 Unit, Integration, and End-to-End Testing Boundaries 419
- 13.5 Testing Components from the User Perspective 420
- 13.6 Testing Props, State, and Events 420
- 13.7 Testing Forms and Validation 421
- 13.8 Testing Accessibility Expectations 423
- 13.9 Testing Async UI 424
- 13.10 Testing Loading, Error, Empty, and Success States 427
- 13.11 Mocking APIs and Network Boundaries 427
- 13.12 Testing Server-State Behavior 428
- 13.13 Testing Custom Hooks 430
- 13.14 Testing Reducers and Pure Logic 431
- 13.15 Fake Timers and Time-Based Behavior 432
- 13.16 Avoiding Brittle Tests 434
- 13.17 Test Data Builders and Helpers 435
- 13.18 TypeScript Patterns for Tests 436
- 13.19 Debugging Failing Tests 437
- 13.20 Senior-Level Tradeoffs 438
- 13.21 Interview Question Bank 439
- 13.22 Debugging and Scenario Questions 443
- 13.23 Mini Exercises 445
- 13.24 Quick Review Checklist 447
- 13.25 Chapter Summary 447
-
14 Security, Deployment, and Observability in Frontend Apps 448
- 14.1 Interview Perspective 448
- 14.2 Security Mindset for Frontend Developers 449
- 14.3 XSS and Safe Rendering 450
- 14.4 dangerouslySetInnerHTML and Sanitization Boundaries 451
- 14.5 Token Storage Tradeoffs 452
- 14.6 Auth Boundaries and Frontend Responsibility 453
- 14.7 CORS Misconceptions 455
- 14.8 CSRF Concepts 456
- 14.9 Content Security Policy 456
- 14.10 Dependency and Supply-Chain Risk 457
- 14.11 Environment Configuration 458
- 14.12 Build-Time vs Runtime Configuration 459
- 14.13 Secrets Do Not Belong in Frontend Bundles 460
- 14.14 Deployment Models for React Apps 461
- 14.15 Static Hosting vs Containerized Frontend 462
- 14.16 Cache Headers and Asset Versioning 462
- 14.17 Rollback Strategy 464
- 14.18 Feature Flags and Gradual Rollout 464
- 14.19 Error Boundaries and Production Fallback UI 465
- 14.20 Client-Side Logging and Telemetry 467
- 14.21 Frontend Observability 468
- 14.22 Release Validation and Smoke Tests 469
- 14.23 Debugging Production Issues 470
- 14.24 Senior-Level Tradeoffs 471
- 14.25 Interview Question Bank 472
- 14.26 Debugging and Scenario Questions 477
- 14.27 Mini Exercises 480
- 14.28 Quick Review Checklist 481
- 14.29 Chapter Summary 482
-
15 React System Design, Tradeoffs, and Troubleshooting Scenarios 484
- 15.1 Interview Perspective 484
- 15.2 How to Clarify Requirements 485
- 15.3 Functional vs Non-Functional Requirements 486
- 15.4 Choosing Application Boundaries 487
- 15.5 Component and Route Architecture 488
- 15.6 State Ownership Decisions 490
- 15.7 Server-State and Cache Strategy 491
- 15.8 Forms and Validation Strategy 493
- 15.9 Error Handling and Fallback Strategy 493
- 15.10 Performance Strategy 495
- 15.11 Accessibility Strategy 496
- 15.12 Security Strategy 497
- 15.13 Observability and Production Debugging Strategy 498
- 15.14 Deployment and Rollback Strategy 499
- 15.15 Tradeoff Communication 500
- 15.16 Troubleshooting Methodology 501
- 15.17 Capstone Scenario 1: Event Registration or Booking Flow 503
- 15.18 Capstone Scenario 2: Admin Dashboard or Data-Heavy App 506
- 15.19 Capstone Scenario 3: Payment or Checkout-Style Flow 507
- 15.20 Capstone Scenario 4: Real-Time or Collaborative UI 509
- 15.21 Senior-Level Interview Question Bank 511
- 15.22 Debugging and Scenario Questions 515
- 15.23 Mini Exercises 518
- 15.24 Final Review Checklist 520
- 15.25 Chapter Summary 521
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 (535 manuscript pages).
Minimum price
$14.99
$24.99
You pay
Author earns
PDF
About
About the Book
The React and TypeScript Interview Compendium is a structured technical interview reference for developers working with modern React and TypeScript applications.
The content is organized around React rendering, component architecture, state management, async UI flow, testing, performance, and advanced TypeScript topics that experienced frontend engineers are commonly expected to explain in interviews.
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.
Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.
You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!
So, there's no reason not to click the Add to Cart button, is there?
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.