react-performance-check

Fast CLI to audit React and Next.js projects for performance anti-patterns and output a clear score you can act on.

Why this tool

react-performance-check gives you a quick health snapshot of your frontend codebase by scanning for common expensive patterns (and rewarding good optimization patterns).

• Works with React and Next.js
• Zero config
• Human-friendly terminal report
• Plain mode for CI pipelines

Quick Start

# run once with npx
npx react-performance-check .

# or install globally
npm install -g react-performance-check
react-performance-check ./my-app

CLI Usage

react-performance-check <path> [--plain]

| Option | Description | |---|---| | <path> | Folder to scan (default: current directory) | | --plain | Minimal output for CI/log parsing | | --help, -h | Show help |

Output Preview

Plain mode:

React Performance Report
Score: 80/100
Result: Good

Interactive terminals (TTY) show an enhanced, colorized dashboard with:

• project type
• scan coverage
• confidence signal
• quality meter
• short insight hint

What gets analyzed

Penalty signals

• Inline JSX handlers like onClick={() => ...}
• Missing key in list rendering
• console.log / console.warn / console.error / console.info
• Large file complexity
• Heavy sync operations (JSON.parse, sort/filter/reduce chains)
• useEffect missing dependency array
• dangerouslySetInnerHTML
• Excessive useState calls
• Heavy prop-drilling signatures
• Next.js specific:
  • raw <img> usage instead of <Image>
  • raw <a href> usage instead of <Link>

Bonus signals

• useMemo / useCallback
• React.memo
• React.lazy / dynamic imports
• TypeScript usage (.ts / .tsx)

Score scale

| Score | Label | |---|---| | 85-100 | Excellent | | 65-84 | Good | | 45-64 | Average | | 0-44 | Poor |

Use as a Node API

const { run } = require('react-performance-check');

const report = run('./my-react-app');
console.log(report);

Expected shape:

{
  score: 80,
  label: 'Good',
  projectType: 'react' // or 'nextjs' | 'unknown'
  analyzedCount: 24,
  totalFiles: 61
}

Local development

npm install
npm test
node cli.js ./path-to-project --plain

Publish checklist

npm login
npm version patch
npm publish --access public

Recommended before publish:

• run npm pack --dry-run
• verify tarball files and README rendering
• test CLI via npm link

Notes

• This is a heuristic static scan (regex-based), not a full AST linter.
• Treat score as guidance, not a production performance benchmark.

License

MIT