Detection of code smells in react with TypeScript applications

Context:

In the last few years, React has become a popular library for building web interfaces, and more recently, developers have started using it with TypeScript, a language that adds static typing to JavaScript. Although code smells have been explored in several works, there are few studies that focus on the quality problems specific to web interfaces built using React and this language.

Objective:

This work aims to identify common code smells in this context, assess how developers perceive their impact, propose a tool to detect them, evaluate the tool’s performance and usability, and analyze the prevalence of these smells in open-source projects.

Method:

We conducted a gray literature review to identify code smells, followed by interviews and a community survey to validate them. We developed the tool SniffTSX by extending ReactSniffer to detect the smells. To evaluate the tool, we built a dataset with labeled instances and measured its detection performance using standard metrics. We also carried out a TAM-based user study with undergraduate computing students.

Results:

We identified six relevant smells. According to developers’ perception, the most critical and frequent ones are Any Type, Multiple Booleans for State, and Non-Null Assertions. The tool achieved high performance (accuracy: 0.96, precision: 0.98, recall: 0.93, F1: 0.95). The user study showed positive perceptions of usefulness and ease of use. The empirical analysis confirmed the widespread presence of the smells, particularly Any Type and Non-Null Assertions, in real-world projects. Our evaluation results show that SniffTSX is useful.

Conclusion:

We contribute a catalog of React-specific TypeScript code smells and a tool to detect them. The tool proved accurate, well-received by students, and effective in revealing real-world smell prevalence, supporting developers in improving code quality.