Refatoração de code smells em aplicações React.js

Abstract

The development of modern web applications requires well-structured code to ensure maintainability and scalability. In the context of React.js, one of the most popular front-end frameworks, the presence of code smells can compromise software quality, making it harder to understand and modify. Refactoring is an essential practice to mitigate these issues, improving code organization without altering its functional behavior. This study investigates the identification and correction of code smells in React.js applications, proposing a Visual Studio Code plugin to assist in the automated detection and refactoring of these issues. The research involved restructuring a detection tool called ReactSniffer, from which 122 code smells were removed, analyzing refactoring techniques for React/TypeScript projects—identifying 4 refactorings for specific code smells in this context—and implementing a Visual Studio Code plugin with 7 automated refactorings. The plugin was validated with 48 participants, assessing the efficiency of refactorings performed manually and with the aid of the tool, perceived usefulness, ease of use, and intention for future use. The results indicate that the tool can significantly reduce the time required for refactorings in React.js projects, with an average reduction of 70.22% in time per line of code when using both JavaScript and TypeScript. Participants also found the tool useful for its intended purpose, with an average approval rating of 81.2%, but reported usability issues and remained neutral regarding future use.