React Review Skill
Review React components for best practices, performance issues, and common patterns.
When to use me
Use this skill when:
- Reviewing React component code
- Optimizing component performance
- Checking for React best practices
- Refactoring legacy components
- Auditing component architecture
What I do
- Analyze React components for performance issues (unnecessary re-renders, large bundles)
- Check for React best practices (hooks usage, prop patterns, state management)
- Identify anti-patterns (prop drilling, useEffect misuse, missing keys)
- Suggest optimizations (memoization, code splitting, lazy loading)
- Review TypeScript usage and type safety
Examples
# Review a specific component file
agent: Review the component in src/components/UserProfile.tsx
# Review all components in a directory
agent: Review React components in src/components/
# Check for performance issues
agent: Find performance issues in the Button componentOutput format
## React Component Review
### Component: UserProfile.tsx
**Issues Found:**
1. Performance: Missing React.memo on component that receives object props
2. Best Practice: useEffect missing dependency array
3. Type Safety: Missing TypeScript interfaces for props
**Recommendations:**
1. Wrap component with React.memo
2. Add dependency array to useEffect
3. Create interface for component props
**Code Suggestions:**interface UserProfileProps { user: User; onUpdate: (user: User) => void; }
const UserProfile = React.memo(({ user, onUpdate }: UserProfileProps) => { // implementation });
Notes
- Focuses on React 18+ patterns and best practices
- Considers both class and function components
- Includes TypeScript and JavaScript variants
- References official React documentation and community patterns