Treffer: Detection of code smells in react with TypeScript applications.

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. 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. 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. 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. 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. • We cataloged 6 code smells for React with TypeScript. • From these 6 smells, 3 Low-level concerns and 3 Design-related. • We validate each smell through a survey and interviews with React practitioners. • We propose and evaluate a tool to detect these smells, showing its effectiveness in open-source projects. [ABSTRACT FROM AUTHOR]

Copyright of Information & Software Technology is the property of Elsevier B.V. and its content may not be copied or emailed to multiple sites without the copyright holder's express written permission. Additionally, content may not be used with any artificial intelligence tools or machine learning technologies. However, users may print, download, or email articles for individual use. This abstract may be abridged. No warranty is given about the accuracy of the copy. Users should refer to the original published version of the material for the full abstract. (Copyright applies to all Abstracts.)