React

Chapter 13: Architecture & Best Practices — Enterprise folder structure, Smart vs Dumb components, state colocation, compound components, and clean code principles.

1. Feature-Based Enterprise Folder Architecture

As applications scale beyond 50 components, grouping files by technical layer (all components in one folder, all hooks in another) creates massive cognitive overhead. Modern enterprise applications organize by Features (Domain-Driven Design):

src/
├── assets/                  # Shared global branding icons, images, fonts
├── components/              # Shared atomic UI primitives (Button, Modal, Input)
├── context/                 # Global application contexts (AuthContext, ThemeContext)
├── hooks/                   # Shared global custom hooks (useLocalStorage, useDebounce)
├── services/                # API client configuration & Axios/fetch instances
├── features/                # Domain-specific feature modules
│   ├── auth/                # Authentication domain
│   │   ├── components/      # LoginForm.jsx, RegisterCard.jsx
│   │   ├── hooks/           # useAuthMutation.js
│   │   ├── services/        # authApi.js
│   │   └── types/           # auth.types.ts
│   ├── checkout/            # Checkout & Billing domain
│   └── dashboard/           # Analytics & Reporting domain
├── layouts/                 # Root wrappers (AppLayout, DashboardLayout)
├── routes/                  # AppRoutes.jsx router definition
├── App.jsx                  # Root composition root
└── main.jsx                 # Entry point

Architecture Structure Verification:

[Structure Audit] 100% Feature-Driven Domain Isolation ✓ Self-contained feature modules in src/features/ ✓ Global primitives isolated in src/components/ ✓ Build bundle tree-shaking optimized!

2. Container vs Presentational (Smart vs Dumb) Pattern

Presentational ("Dumb") Components

Pure visual styling

Focuses exclusively on how things look.
Receives data strictly via props and triggers callbacks.
Contains zero side-effect network calls; completely reusable.

Container ("Smart") Components

Business logic orchestrator

Focuses on how things work.
Fetches data, manages state, coordinates custom hooks.
Renders Presentational components and supplies them with data.

3. State Categorization & State Colocation

🎯 The Golden Rule of State Colocation: "Keep State as Close to Where It's Used as Possible"

Do NOT dump all state into a global Redux/Context store! Categorize your state into 4 layers:

1. Local UI State (useState): Dropdown open/close, modal visibility, hover states.
2. Lifted State (Props): State shared by two sibling components placed in their common parent.
3. Global App State (Context): Authenticated user, Theme, Localization language.
4. Server Cache State (React Query / TanStack): Fetched API data, caching, pagination, optimistic updates.

4. Hands-On Practice Challenges

Master enterprise React architecture, container/presentational separation, and compound component systems. Click "Solve Challenge" to open the workspace!

🎯 Hands-on Coding Challenge Container Architecture

Challenge 1: Container vs Presentational Data Separator

Write a container processing function separateSmartDumb(rawUserList, filterQuery) that isolates business logic (filtering, sorting) and outputs clean, presentational props ready for rendering.

📋 Requirements & What to Write:

Filter rawUserList by case-insensitive filterQuery.
Map matched items into presentational props: { avatarUrl, title, subtitle }.
Ensure the function does not produce UI markup directly.

Expected Result: [ { avatarUrl: "https://avatars.example.com/1", title: "Anshuman", subtitle: "Staff Eng • Frontend" } ]

💡

Editor Instructions: Complete separateSmartDumb to isolate business transformations from presentation.

// Build the container transformer:
function separateSmartDumb(rawUserList, filterQuery) {
    // Return presentational card data
}

const list = [{ id: 1, name: 'Alice', role: 'Dev', team: 'UI' }];
console.log('Cards:', separateSmartDumb(list, 'Al'));

Console / Terminal Output

// Output will appear here when you click "Run Code"...

🎯 Hands-on Coding Challenge State Colocation

Challenge 2: State Categorization Advisor

Implement an architectural decision helper categorizeState(stateKeyName) that categorizes state keys into their optimal React storage location (Local UI, Lifted, Global Context, or Server Cache).

📋 Requirements & What to Write:

Map UI state (isModalOpen) to LOCAL_UI_STATE.
Map global state (themeMode) to GLOBAL_APP_STATE.
Map network data (fetchedUserProfile) to SERVER_CACHE_STATE.

Expected Result: themeMode: GLOBAL_APP_STATE (Context) | isModalOpen: LOCAL_UI_STATE (useState)

💡

Editor Instructions: Complete categorizeState to classify state variables by scope.

// Implement state classifier:
function categorizeState(stateKeyName) {
    // Return storage recommendation
}

console.log(categorizeState('themeMode'));
console.log(categorizeState('isModalOpen'));

Console / Terminal Output

// Output will appear here when you click "Run Code"...

🎯 Hands-on Coding Challenge Compound Components

Challenge 3: Compound Component Architecture Simulator

Implement compoundTabsManager(tabs, activeTabId) that coordinates compound tab headers and corresponding active panel bodies dynamically.

📋 Requirements & What to Write:

Generate tabList with isActive: boolean set.
Find the matching active tab and return its content in activePanel.

Expected Result: Active Tab t1: { tabList: [ { id: "t1", title: "Overview", isActive: true }, ... ], activePanel: "Overview Content..." }

💡

Editor Instructions: Coordinate compound tab headers and panels dynamically.

// Build compound tabs manager:
function compoundTabsManager(tabs, activeTabId) {
    // Return { tabList, activePanel }
}

const sampleTabs = [{ id: '1', title: 'Home', content: 'Welcome!' }];
console.log('Manager:', compoundTabsManager(sampleTabs, '1'));

Console / Terminal Output

// Output will appear here when you click "Run Code"...