ReactSniffer is a tool to support practitioners and researchers in detecting code smells in React-based web systems. The tool has two key components: a parser for analyzing the React files and a Smells Detector module for identifying the smells.
The Parser is a Command-Line Interface (CLI) implemented in Node, which receives as input a valid front-end file and generates an Abstract Syntax Tree (AST) in a JSON format. The Smells Detector module is also implemented in Node and relies on the AST to search and inspect React elements.
Use the package manager npm to install locally.
npm install -g reactsnifferTo use this tool you need to provide the repository directory (e.g., myproject/react/src)
reactsniffer myproject/react/srcThe output will show the smells into two summarized tables.
Two CSV files (one per file and another by component) with more details about each smell will be generated.
ReactSniffer supports the following smells:
| Smell | Description |
|---|---|
| Large Component | Component with too many props, attributes, and/or lines of code |
| Too Many Props | Passing too many properties to a single component |
| Inheritance Instead of Composition | Using inheritance to reuse code among components |
| Props in Initial State | Initializing state with props |
| Direct DOM Manipulation | Manipulating DOM directly |
| Force Update | Forcing the component or page to update |
| JSX outside the render method | Implementing markup in multiple methods |
| Uncontrolled Components | A component that does not use props/state to handle form's data |
| Large File | A file with several components and lines of code |