Free, open-source React code analyzer - detect hooks issues, performance problems, and anti-patterns
npm install zippyfixer-react-analyzerFree, open-source React code analyzer. Detect hooks issues, performance problems, and anti-patterns in your React code.
- 🔍 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
``bash`
npm install @zippyfixer/react-analyzeror
yarn add @zippyfixer/react-analyzeror
pnpm add @zippyfixer/react-analyzer
`typescript
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
);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
$3
Performs a comprehensive analysis of React code.
Returns:
typescript
interface AnalysisResult {
issues: Issue[]; // Detected problems
suggestions: Suggestion[]; // Improvement recommendations
metrics: CodeMetrics; // Code statistics
score: number; // Quality score (0-100)
}
`$3
Fast check for critical issues. Perfect for CI/CD pipelines.
$3
Get statistics on hook usage in your code.
Detected Issues
| Issue Type | Severity | Description |
|------------|----------|-------------|
|
| 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
$3
`javascript
// 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 });
});
}
}
};
}
}
}
};
`$3
yaml
- name: React Code Analysis
run: |
npx @zippyfixer/react-analyzer src/*/.tsx
`$3
bash
#!/bin/sh
npx @zippyfixer/react-analyzer $(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(tsx?|jsx?)$')
``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
Contributions are welcome! Please read our Contributing Guide for details.
MIT © ZippyFixer Team
---
Made with ⚡ by the ZippyFixer team