React Architecture

Architecture decides long-term velocity. Strong boundaries keep apps understandable as teams and features grow.

Feature module structure

src/
  features/
    billing/
      components/
      hooks/
      services/
      model/
      index.ts

State architecture

Define ownership by scope: component-local state, feature state, and server state each need distinct patterns.

Dependency boundaries

Keep domain logic framework-light and isolate I/O concerns from presentational components.

Scaling strategy

  1. Start with feature folders and clear import directions.
  2. Extract shared modules only when duplication is meaningful.
  3. Document boundaries and rationale as the codebase evolves.

Practice

Refactor a medium-size app into feature modules and define allowed dependency directions between layers.