React System Design Interview Problems

by

🔷 How to Answer React System Design Questions (Before We Start)

Interviewers evaluate:

  • Thinking process
  • Trade-offs
  • Scalability
  • Separation of concerns
  • Performance awareness
  • Production readiness

❌ They do NOT expect full code
✅ They expect architecture + reasoning

🧩 Problem 1 — Design a Protected Admin Dashboard

❓ Problem Statement

Design a React Admin Dashboard with:

  • Authentication
  • Role-based access
  • API-driven pages
  • Scalability

✅ Expected Features

  • Login / Logout
  • Admin, Manager, User roles
  • Protected routes
  • Modular layout (Sidebar + Header)

🏗️ High-Level Architecture

App
│
├── AuthProvider
├── Router
│   ├── ProtectedRoute
│   └── RoleProtectedRoute
│
├── DashboardLayout
│   ├── Sidebar
│   ├── Header
│   └── Content
│
├── Features
│   ├── Users
│   ├── Reports
│   └── Settings

🧠 Key Design Decisions

  • Auth state in Context
  • API logic centralized
  • RBAC handled declaratively
  • Error boundaries per route

🎯 Interviewer Looks For

✔ Clear auth flow
✔ RBAC separation
✔ No prop drilling
✔ Production mindset

🧩 Problem 2 — Design a Scalable Form System

❓ Problem Statement

Design a dynamic form system where:

  • Forms come from backend
  • Fields change dynamically
  • Validation is reusable

🏗️ Architecture

FormEngine
│
├── Schema (JSON)
├── FieldRenderer
├── Field Components
│   ├── Text
│   ├── Select
│   └── Checkbox
├── Validation Engine
└── useFormState Hook

🧠 Key Decisions

  • Schema-driven UI
  • Field factory pattern
  • Central validation logic
  • Controlled inputs

🎯 Interviewer Looks For

✔ Abstraction thinking
✔ Reusability
✔ No hardcoded UI
✔ Extensibility

🧩 Problem 3 — Design Global Error Handling in React

❓ Problem Statement

Design a system to handle:

  • UI crashes
  • API failures
  • Network errors

🏗️ Error Handling Layers

UI Errors → Error Boundaries
API Errors → API Interceptor
User Errors → Global Error Context
Logging → Monitoring Service

🧠 Key Design Decisions

  • Multiple error boundaries
  • Central API error handler
  • Global error banner
  • Graceful fallbacks

🎯 Interviewer Looks For

✔ Layered error handling
✔ UX awareness
✔ Production logging

🧩 Problem 4 — Design Authentication & Authorization System

❓ Problem Statement

Design frontend auth with:

  • JWT
  • Protected routes
  • Role-based access

🏗️ Architecture

AuthProvider
│
├── user
├── token
├── login()
├── logout()
├── restoreSession()
└── permissions

🧠 Key Decisions

  • Token persistence
  • Central auth state
  • Route guards
  • Role checks

🎯 Interviewer Looks For

✔ Security awareness
✔ Separation of auth vs RBAC
✔ Clean API usage

🧩 Problem 5 — Design a Real-Time Dashboard

❓ Problem Statement

Design a dashboard that:

  • Shows analytics
  • Updates frequently
  • Handles large datasets

🏗️ Architecture

Dashboard
│
├── API Layer
├── Data Fetching (Caching)
├── Metric Cards
├── Charts
├── Tables
└── Auto Refresh

🧠 Key Design Decisions

  • Server state management
  • Caching strategy
  • Loading & error states
  • Performance optimization

🎯 Interviewer Looks For

✔ Data lifecycle handling
✔ Performance thinking
✔ UI responsiveness

🧩 Problem 6 — Design a Component Library

❓ Problem Statement

Design reusable UI components for multiple apps.

🏗️ Architecture

components/
│
├── Button
├── Modal
├── Input
├── Table
├── ThemeProvider
└── Design Tokens

🧠 Key Decisions

  • Compound components
  • Accessibility support
  • Theme handling
  • Versioning strategy

🎯 Interviewer Looks For

✔ API design skills
✔ Reusability
✔ Accessibility awareness

🧩 Problem 7 — Optimize a Slow React Application

❓ Problem Statement

App is slow and re-renders frequently.

🧠 Debugging Steps

  1. React Profiler
  2. Identify unnecessary re-renders
  3. Memoize components
  4. Optimize lists
  5. Reduce state scope

🎯 Interviewer Looks For

✔ Debugging methodology
✔ Avoid premature optimization
✔ Tool awareness

🧩 Problem 8 — Design Large List Rendering

❓ Problem Statement

Render 100,000+ items efficiently.

🧠 Solution

  • Virtualization
  • Pagination
  • Memoized rows
  • Windowing

🎯 Interviewer Looks For

✔ Performance trade-offs
✔ UI constraints
✔ Browser limitations

🧩 Problem 9 — Design Multi-Step Onboarding Flow

❓ Problem Statement

User must complete steps before accessing app.

🏗️ Architecture

Onboarding
│
├── Step Router
├── Progress Tracker
├── Validation
└── Completion State

🎯 Interviewer Looks For

✔ State persistence
✔ UX thinking
✔ Navigation control

🧩 Problem 10 — Design a SaaS Feature Gating System

❓ Problem Statement

Restrict features based on subscription plan.

🧠 Solution

const featureMatrix = {
  free: ["dashboard"],
  pro: ["dashboard", "analytics"],
  enterprise: ["all"]
};

Use:

  • FeatureGuard component
  • Backend enforcement

🎯 Interviewer Looks For

✔ Clean gating logic
✔ No hardcoded checks
✔ SaaS thinking

🚨 Common System Design Interview Traps

❌ Writing full code
❌ Overusing Redux
❌ Ignoring error states
❌ No scalability discussion
❌ No trade-offs

🧠 Golden Framework to Answer Any React System Design Question

1️⃣ Clarify requirements
2️⃣ Identify users & scale
3️⃣ Define architecture
4️⃣ Choose state strategy
5️⃣ Handle errors & loading
6️⃣ Discuss performance
7️⃣ Mention trade-offs

🏁 Final Advice

If you can:

  • Explain why, not just what
  • Talk about trade-offs
  • Show production thinking

👉 You are senior-level ready.

Leave a Comment