react-architecture-enforcer

React architecture enforcement involves codifying rules like keeping logic out of UI, maintaining single sources of truth, and limiting component file size. Pre-flight checks validate these patterns before changes are accepted, catching violations early and providing extraction plans to move logic into domain or service layers.

The Five Laws enforce clean React patterns: no UI logic, no mutating singletons, files under 300 lines, no duplicated logic, and examined effects only. Apply them by running pre-flight checks on modified components, especially files over 200 lines, to identify violations and extract logic into pure functions and services before merging.

Refactoring large React components starts with identifying logic violations through architecture checks. Extract business logic, state management, and side effects into separate domain, services, and config layers with pure functions. Conduct dependency audits to ensure UI components only handle rendering while maintaining single responsibility.

Yes, architecture enforcement works on existing projects and is especially valuable for files exceeding 200 lines. It applies mandatory pre-flight checks to new features and bug fixes, providing extraction workflows to gradually refactor oversized components into organized domain and service layers without disrupting current code.

Pre-flight checks validate file size thresholds, detect logic in UI components, identify duplicated logic, flag mutating singletons, and examine side effects. They ensure changes align with existing patterns and provide rationalization plans when violations occur, keeping refactors low-risk and maintainable.

Architecture-focused linting rules automate pattern enforcement during refactoring by flagging anti-patterns in real time. Combined with pre-flight checks and extraction guidance, linting reduces review friction, prevents regressions, and ensures all changes follow the same architectural principles across the codebase.