@zippyfixer/react-analyzer

Free, open-source React code analyzer. Detect hooks issues, performance problems, and anti-patterns in your React code.

Features

• 🔍 Hooks Analysis - Detect missing dependencies, async effects, conditional hooks
• ⚡ Performance Issues - Find inline functions, unnecessary re-renders, unstable references
• 🛡️ Security Scanning - Identify XSS vulnerabilities and unsafe HTML usage
• 📊 Code Metrics - Get complexity scores and component statistics
• 🎯 Actionable Fixes - Every issue comes with a suggested fix

Installation

npm install @zippyfixer/react-analyzer
# or
yarn add @zippyfixer/react-analyzer
# or
pnpm add @zippyfixer/react-analyzer

Quick Start

import { analyzeReactCode, quickCheck } from '@zippyfixer/react-analyzer';

// Full analysis
const result = analyzeReactCode(`
  function MyComponent() {
    const [data, setData] = useState(null);
    
    useEffect(async () => {
      const response = await fetch('/api/data');
      setData(await response.json());
    });
    
    return <div>{data}</div>;
  }
`);

console.log(result.issues);
// [
//   {
//     type: 'async-effect',
//     severity: 'error',
//     message: 'useEffect callback cannot be async...',
//     fix: 'useEffect(() => { const fetchData = async () => {...}; fetchData(); }, []);'
//   },
//   {
//     type: 'missing-deps',
//     severity: 'warning',
//     message: 'useEffect is missing dependency array...'
//   }
// ]

console.log(result.score); // 70 (out of 100)

// Quick check for CI/CD
const { passed, issues } = quickCheck(code);
if (!passed) {
  console.error('Code quality check failed:', issues);
  process.exit(1);
}

API Reference

analyzeReactCode(code: string): AnalysisResult

Performs a comprehensive analysis of React code.

Returns:

interface AnalysisResult {
  issues: Issue[];      // Detected problems
  suggestions: Suggestion[]; // Improvement recommendations
  metrics: CodeMetrics; // Code statistics
  score: number;        // Quality score (0-100)
}

quickCheck(code: string): { passed: boolean; issues: string[] }

Fast check for critical issues. Perfect for CI/CD pipelines.

getHookStats(code: string): Record<string, number>

Get statistics on hook usage in your code.

Detected Issues

| Issue Type | Severity | Description | |------------|----------|-------------| | missing-deps | Warning | useEffect missing dependency array | | async-effect | Error | Async function directly in useEffect | | conditional-hook | Error | Hook called inside conditional | | xss-vulnerability | Error | dangerouslySetInnerHTML usage | | missing-cleanup | Warning | Effect with subscription missing cleanup | | infinite-loop | Error | Unstable reference in dependency array | | inline-function | Info | Inline function in JSX props |

Integration Examples

ESLint Plugin

// eslint.config.js
import { quickCheck } from '@zippyfixer/react-analyzer';

export default {
  rules: {
    'zippyfixer/react-check': {
      create(context) {
        return {
          Program(node) {
            const { passed, issues } = quickCheck(context.getSourceCode().getText());
            if (!passed) {
              issues.forEach(issue => {
                context.report({ node, message: issue });
              });
            }
          }
        };
      }
    }
  }
};

GitHub Action

- name: React Code Analysis
  run: |
    npx @zippyfixer/react-analyzer src/**/*.tsx

Pre-commit Hook

#!/bin/sh
npx @zippyfixer/react-analyzer $(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(tsx?|jsx?)$')

Want More?

This open-source package provides basic static analysis. For AI-powered analysis with:

• 🤖 Natural language explanations
• 🔧 Automatic code fixes
• 📈 Team analytics
• 🎯 Custom rules for your codebase
• 💬 Chat with AI about your code

Visit ZippyFixer.com - The #1 AI Tool for React Developers

Contributing

Contributions are welcome! Please read our Contributing Guide for details.

License

MIT © ZippyFixer Team

Made with ⚡ by the ZippyFixer team