Automated Detection of Architectural Anti-Patterns in React Applications Using Static Analysis

Abstract

This research provides a reusable framework for measuring architectural quality in React applications, transforming qualitative architectural principles into measurable, automated checks. The tool processes codebases at speeds suitable for continuous integration pipeline integration and produces severity-tiered output that guides development teams in prioritizing refactoring effort. The validation methodology, combining stratified sampling, independent expert review, and pre-defined outcome mapping, provides a template applicable to future code smell detection research in React and other frameworks.A systematic comparison with SniffTSX, a recently published React smell detector focused on TypeScript type safety, reveals minimal overlap between the two tools. Of twelve combined pattern categories, only two show any partial overlap, confirming that the tools address orthogonal concerns and complement rather than compete with each other. SniffTSX ensures TypeScript correctness and React API compliance; this tool ensures architectural soundness. Together they provide comprehensive quality coverage across dimensions that neither addresses alone. The tool was evaluated against four open-source repositories: Grafana, Mattermost, Refine, and TodoMVC. It processed 8,458 components across approximately 2.3 million lines of code at an average rate of 452 components per minute, producing 544 detections with a consistent detection rate of 5.4 to 6.9 percent across all four repositories. A formal validation study involving three independent reviewers who assessed 71 stratified components achieved 100 percent completion and an average precision of 86.39 percent across all reviewers. God Component detection, the primary contribution, achieved 98.04 percent precision with only one false positive out of 51 assessed components. Extreme severity cases achieved 100 percent precision, and Severe severity cases achieved 96.43 percent precision. Average pairwise inter-rater reliability was 62.5 percent, reflecting the inherent subjectivity of architectural quality assessment. This thesis presents a pattern detection tool that identifies six React-specific architectural anti-patterns through Abstract Syntax Tree analysis and combined metric thresholds. The six patterns are: God Components, Prop Drilling, Inline Functions, Duplicate State, Deep JSX Nesting, and useEffect Dependency Issues. Each pattern is measured using quantifiable code metrics including Lines of Code, JSX element count, and hook count, then classified across three severity tiers, Extreme, Severe, and Moderate, using thresholds calibrated from real production codebases. The primary methodological contribution is the combined metric approach for God Component detection, which requires a component to simultaneously exceed thresholds on all three metrics rather than any single one, substantially reducing false positives relative to single-metric detection.