React Architectural Patterns

Architecture

Component Types

Server Components

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

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

Client Components

• Components using React hooks
• Event listeners and interactivity
• Browser APIs (localStorage, geolocation, etc.)
• Custom hooks usage

• 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

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

• Easier testing of presentation logic
• Better performance with Server Components
• Clear separation of concerns

Custom Hooks

• 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

• 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

• 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

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

• 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