Detecting code smells in React-based Web apps

Fábio Ferreira

doi:10.1016/j.infsof.2022.107111

Return

Detecting code smells in React-based Web apps

2023-03-01

PRE

Fábio Ferreira *

Marco Túlio Valente

DOI：10.1016/j.infsof.2022.107111

Original

Original request for help

Save

Abstract

En 中文

Context: Facebook's React is a widely popular JavaScript library to build rich and interactive user interfaces (UI). However, due to the complexity of modern Web UIs, React applications can have hundreds of components and source code files. Therefore, front-end developers are facing increasing challenges when designing and modularizing React-based applications. As a result, it is natural to expect maintainability problems in React-based UIs due to suboptimal design decisions.Objective: To help developers with these problems, we propose a catalog with twelve React-related code smells and a prototype tool to detect the proposed smells in React-based Web apps.Method: The smells were identified by conducting a grey literature review and by interviewing six professional software developers. We also use the tool in the top-10 most popular GitHub projects that use React and conducted a historical analysis to check how often developers remove the proposed smells.Results: We detect 2,565 instances of the proposed code smells. The results show that the removal rates range from 0.9% to 50.5%. The smell with the most significant removal rate is Large File (50.5%). The smells with the lowest removal rates are Inheritance Instead of Composition (IIC) (0.9%), and Direct DOM Manipulation (14.7%). Conclusion: The list of React smells proposed in this paper as well as the tool to detect them can assist developers to improve the source code quality of React applications. While the catalog describes common problems with React applications, our tool helps to detect them. Our historical analysis also shows the importance of each smell from the developers' perspective, showing how often each smell is removed.

Keywords:

JavaScript

React

Anti -patterns

Code smells

Maintainability

Software design