# React Architectural Patterns

> Invoke when design-architect or code-developer designs React 19 component architecture. Provides component type taxonomy, composition patterns, state management strategies, render optimization techniques, and React 19 feature guidance.

- Skill: `masanao-ohba/react-architectural-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add masanao-ohba/react-architectural-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/masanao-ohba/react-architectural-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: masanao-ohba (https://skillmd.com/u/masanao-ohba)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/masanao-ohba/react-architectural-patterns

---


# React Architectural Patterns

## Architecture

### Component Types

#### Server Components

Default in React 19 - rendered on server only.

**Use Cases:**
- Data fetching from databases or APIs
- Accessing backend resources directly
- Keeping sensitive information on server
- Large dependencies that don't need client-side

**Characteristics:**
- Cannot use hooks (useState, useEffect, etc.)
- Cannot use browser APIs
- Can be async functions
- Better performance (less JavaScript to client)

#### Client Components

Interactive components that run on client.

**Use Cases:**
- Components using React hooks
- Event listeners and interactivity
- Browser APIs (localStorage, geolocation, etc.)
- Custom hooks usage

**Characteristics:**
- Must be marked with 'use client' directive
- Can use all React hooks
- Re-render on state changes
- Increases client bundle size

### Composition Patterns

#### Component Composition

- Prefer composition over inheritance
- Use children prop for flexible layouts
- Compound components for related functionality
- Higher-order components (HOCs) for cross-cutting concerns
- Render props for dynamic behavior

#### State Management

- Lift state up to common ancestor
- Use Context for deeply nested props
- External state manager (Zustand) for global state
- Server state manager (React Query) for API data
- Separate UI state from server state

#### Data Flow

- Unidirectional data flow (top-down)
- Props for component configuration
- Callbacks for child-to-parent communication
- Context for implicit prop threading

## Design Patterns

### Container/Presenter

Separate data fetching from presentation.

**Structure:**
- **Container:** Handles data fetching and business logic (Server Component)
- **Presenter:** Pure presentation component (can be Client Component)

**Benefits:**
- Easier testing of presentation logic
- Better performance with Server Components
- Clear separation of concerns

### Custom Hooks

Extract reusable stateful logic.

**Naming:** Always prefix with 'use' (useAuth, useLocalStorage)

**Guidelines:**
- One responsibility per hook
- Return arrays for multiple values [value, setValue]
- Return objects for named values { data, error, isLoading }
- Document hook behavior and dependencies

### Error Boundaries

Catch and handle React errors gracefully.

**Implementation:**
- Wrap entire app or route segments
- Provide fallback UI for errors
- Log errors to monitoring service
- Use error.tsx in Next.js for route-level boundaries

### Suspense Boundaries

Handle async operations with loading states.

**Usage:**
- Wrap async Server Components
- Show loading fallback during data fetch
- Nest Suspense for granular loading states
- Use loading.tsx in Next.js for route-level loading

## Code Organization

### File Structure

#### Component Files

- `ComponentName.tsx` - Main component
- `ComponentName.module.css` - Scoped styles (if needed)
- `ComponentName.test.tsx` - Component tests
- `ComponentName.stories.tsx` - Storybook stories (if used)
- `index.ts` - Barrel export

#### Feature Structure

```
features/feature-name/
├── components/    # Feature-specific components
├── hooks/         # Feature-specific hooks
├── types/         # TypeScript types
├── utils/         # Helper functions
└── index.ts       # Public API
```

### Import Organization

**Order:**
1. React and framework imports
2. External library imports
3. Internal module imports (using @/ alias)
4. Relative imports
5. Style imports
6. Type imports (using 'import type')

## Performance

### Optimization Techniques

- Use React.memo for expensive pure components
- Implement useMemo for expensive calculations
- Use useCallback for stable function references
- Code splitting with dynamic imports
- Lazy load components not needed immediately
- Virtualize long lists (react-window, react-virtuoso)

### Anti-Patterns

**Avoid:**
- Inline function definitions in JSX
- Creating objects/arrays in render
- Excessive use of Context causing re-renders
- Not memoizing context values
- Premature optimization without profiling

## Accessibility

### Requirements

- Use semantic HTML elements
- Provide ARIA labels where needed
- Ensure keyboard navigation works
- Maintain proper heading hierarchy
- Sufficient color contrast ratios
- Screen reader friendly text alternatives