Disciplined React component architecture — file structure, state management, prop boundaries, and loading/error/empty state coverage.

When to Use

Building new React components or pages
Designing component architecture or state management
Implementing responsive layouts
Reviewing UI code for quality
Fixing accessibility issues

Component Architecture

File structure — colocate tests, hooks, and types with components:

src/components/
  TaskList/
    TaskList.tsx          # Component
    TaskList.test.tsx     # Tests
    use-task-list.ts      # Custom hook (if complex logic)
    types.ts              # Component-specific types

Rules:

One component per file
Components under 200 lines (split if larger)
Separate data fetching (containers) from presentation
Every component must handle: loading state, empty state, error state

Disciplined React component architecture — file structure, state management, prop boundaries, and loading/error/empty state coverage.

When to Use

Building new React components or pages
Designing component architecture or state management
Implementing responsive layouts
Reviewing UI code for quality
Fixing accessibility issues

Component Architecture

File structure — colocate tests, hooks, and types with components:

src/components/
  TaskList/
    TaskList.tsx          # Component
    TaskList.test.tsx     # Tests
    use-task-list.ts      # Custom hook (if complex logic)
    types.ts              # Component-specific types

Rules:

One component per file
Components under 200 lines (split if larger)
Separate data fetching (containers) from presentation
Every component must handle: loading state, empty state, error state

Rationalization	Reality
"Accessibility is nice-to-have"	It's a legal requirement in many jurisdictions and a quality signal.
"We'll make it responsive later"	3x harder to retrofit. Mobile-first from the start.
"This component is too small to need its own test"	Small components are the easiest to test. No excuse to skip.
"We don't need empty states yet"	Users hit empty states on first use. It's the first impression.

React Engineering

When to Use

Component Architecture

React Engineering

When to Use

Component Architecture

State Management Decision Tree

Design Quality

Loading States

Common Rationalizations

Red Flags

Verification

Performance Notes

Extract Errors

Frontend Patterns

Coding Standards

Coding Standards

Coding Standards

Frontend Patterns