React Best Practices
React performance optimization guidelines from Mastra Engineering.
Install
npx skills add mastra-ai/mastra --skill react-best-practices -g -a claude-code -y- Repository
- mastra-ai/mastra29.3k
- Category
- Writing
- Updated
- 3d ago
- License
- See repository
- Context cost
- Mediumabout 1,787 tokens
- Runs scripts
- No, instructions only
What it does
React performance optimization guidelines from Mastra Engineering. This skill should be used when writing, reviewing, or refactoring React code to ensure optimal performance patterns. Triggers on tasks involving React components, data fetching, bundle optimization, or performance improvements.
React Best Practices
Overview
Routing and priority guide for React performance and quality, containing 27 rules across 9 categories. Rule files hold the detailed explanations, examples, review smells, and impact metrics.
When to Apply
Reference these guidelines when:
- Writing new React components
- Implementing data fetching
- Reviewing code for performance issues
- Refactoring existing React code
- Optimizing bundle size or load times
Priority-Ordered Guidelines
Rules are prioritized by impact:
| Priority | Category | Impact |
|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL |
| 2 | Bundle Size Optimization | CRITICAL |
| 3 | Client-Side Data Fetching | MEDIUM-HIGH |
| 4 | Re-render Optimization | MEDIUM |
| 5 | Rendering Performance | MEDIUM |
| 6 | JavaScript Performance | LOW-MEDIUM |
| 7 | Component Structure | MEDIUM-HIGH (maintainability) |
| 8 | Testing | MEDIUM-HIGH (correctness) |
| 9 | Type Safety | HIGH |
Quick Reference
Critical Patterns (Apply First)
Eliminate Waterfalls:
- Use
Promise.all()for independent async operations (async-parallel)
Reduce Bundle Size:
- Avoid barrel file imports, import directly from source (
bundle-barrel-imports) - Defer non-critical third-party libraries (
bundle-defer-third-party)
Medium-Impact Patterns
Client-Side Data Fetching:
