React Analyzer

Static analysis tool for detecting React performance issues and anti-patterns that traditional linters miss.

Why React Analyzer?

React Analyzer catches performance issues before they reach production:

• Infinite re-render loops from unstable hook dependencies
• Unnecessary re-renders from inline objects in props and derived state anti-patterns
• Broken memoization when React.memo components receive unstable props
• Stale closures and race conditions from non-functional state updates
• Derived state bugs from useState mirroring props via useEffect

Built with Go and tree-sitter for blazing-fast analysis.

Installation

macOS/Linux:

curl -fsSL https://raw.githubusercontent.com/rautio/react-analyzer/main/install.sh | sh

Windows: Download the latest .zip from Releases, extract it, and add react-analyzer.exe to your PATH.

Custom install directory:

curl -fsSL https://raw.githubusercontent.com/rautio/react-analyzer/main/install.sh | INSTALL_DIR=~/.local/bin sh

Build from source (requires Go 1.23+):

git clone https://github.com/rautio/react-analyzer
cd react-analyzer
go build -o react-analyzer ./cmd/react-analyzer

Quick Start

Analyze a React file:

react-analyzer src/App.tsx

VS Code Extension

React Analyzer includes a VS Code extension with enhanced features:

• Real-time diagnostics - Issues appear as squiggly underlines in your editor
• Component Tree View - Visual sidebar showing your component hierarchy and state flow
• Clickable Related Information - Jump between related code locations
• Analyze on save - Automatic analysis when files are saved

Installation:

⚠️ The extension requires the CLI to be installed first (see installation instructions above).

Once the CLI is installed, download the latest .vsix from Releases and install:

code --install-extension react-analyzer-<version>.vsix

See vscode-extension/README.md for full documentation.

Usage

Command

react-analyzer [options] <file>

Options

Option	Short	Description
--help	-h	Show help message
--version	-v	Show version number
--verbose	-V	Show detailed analysis output and performance metrics
--quiet	-q	Only show errors (suppress success messages and timing)
--no-color		Disable colored output (useful for CI)

Examples

Analyze a directory:

react-analyzer src/components/

Output:

Analyzing 7 files...

src/components/Dashboard.tsx
  12:5 - [no-object-deps] Dependency 'config' is an object/array created in render

✖ Found 1 issue in 1 file (6 files clean)
Analyzed 7 files in 45ms

CI/CD integration:

react-analyzer --no-color src/
if [ $? -ne 0 ]; then
  echo "React analysis failed"
  exit 1
fi

Exit Codes

Code	Meaning
0	No issues found
1	Issues found
2	Analysis error (file not found, parse error, etc.)

Supported Files

• .tsx - TypeScript with JSX
• .jsx - JavaScript with JSX
• .ts - TypeScript
• .js - JavaScript

Rules

React Analyzer includes several rules to catch common React performance issues and anti-patterns. Each rule has detailed documentation with examples and explanations.

Rule	Description	Documentation
unstable-props-to-memo	Detects unstable props breaking memoization (React.memo, useMemo, useCallback). Cross-file analysis.	docs
no-object-deps	Prevents unstable object/array dependencies causing infinite re-render loops	docs
deep-prop-drilling	Detects props drilled through multiple component levels. Cross-file analysis. Configurable threshold.	docs
no-derived-state	Detects useState mirroring props via useEffect (unnecessary re-renders)	docs
no-stale-state	Prevents stale closures by requiring functional state updates	docs
no-inline-props	Detects inline objects/arrays/functions in JSX props breaking memoization	docs

Planned Rules

• unstable-props-in-effects - Detect unstable props in useEffect/useLayoutEffect (lower severity)
• exhaustive-deps - Comprehensive dependency checking
• require-memo-expensive-component - Suggest memoization for expensive components

Path Aliases

React Analyzer automatically detects and supports path aliases for cross-file analysis:

Auto-detection from tsconfig.json

If your project has a tsconfig.json with path mappings, React Analyzer will automatically use them:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

Custom Configuration with .rarc

Create a .rarc (or .reactanalyzerrc.json) file to configure both path aliases and rules:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "~/*": ["./*"]
    }
  },
  "rules": {
    "deep-prop-drilling": {
      "enabled": true,
      "options": {
        "maxDepth": 3
      }
    }
  }
}

Priority: .rarc > .reactanalyzerrc.json > .reactanalyzer.json (legacy) > tsconfig.json

Supported Import Formats:

import Button from "@/components/Button"; // ✅ Aliased import
import { utils } from "@utils/helpers"; // ✅ Aliased with nested path
import Component from "./Component"; // ✅ Relative import (always supported)
import React from "react"; // ✅ External package (skipped)

See Configuration Guide for complete documentation, .rarc.example or .reactanalyzerrc.example.json for examples.

Troubleshooting

File not found

✖ Error: file not found: src/App.tsx

Check the file path is correct.

Unsupported file type

✖ Error: unsupported file type: .json
Supported extensions: .tsx, .jsx, .ts, .js

React Analyzer only analyzes React/JavaScript/TypeScript files.

Parse error

✖ Parse error in src/Broken.tsx:5:12
Cannot analyze file with syntax errors.

Fix syntax errors in your code first.

Contributing

See CONTRIBUTING.md for development setup and guidelines.

---

Questions? Run react-analyzer --help or open an issue on GitHub.