ReactSniffer2 is a fork of the ReactSniffer tool, designed to assist practitioners and researchers in detecting code smells within React-based web systems. This enhanced version includes two primary components: a parser for analyzing React files and a Smells Detector module for identifying code 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 reactsniffer2To use this tool you need to provide the repository directory (e.g., myproject/react/src)
reactsniffer2 myproject/react/srcThe output will consist of a summary of the code smells detected in the command-line interface (CLI) and a JSON file containing a detailed summary of the code smells, including the files and components where these smells were identified, as well as comprehensive detection across all files and components.
ReactSniffer2 supports the following smells:
| Code Smell | Description |
|---|---|
| Props in Initial State | Using props in the initial state |
| Use of index as key in rendering with loops | Using index as a key in rendering loops |
| Component Nesting/JSX Outside the Render | Component nesting/JSX outside the render |
| Large Components | Components that are too large |
| Prop Drilling | Prop Drilling |
| Too many useState | Excessive use of useState |
| Direct DOM Manipulation | Direct DOM manipulation |
| Props Spreading | Spreading props |
| Deep Indentation | Deep indentation |
| Too many props | Too many props |
| Large useEffect | Large useEffect |
| Mutable Variables | Mutable variables |
| Procedural Patterns | Procedural patterns |
| String Literals | String literals |
| Never Using Class Components | Never using class components |
| Use PrevState | Using PrevState |