react-best-practiceslisted
Install: claude install-skill henkisdabro/wookstar-claude-plugins
# React Best Practices - Performance Optimisation
Comprehensive performance optimisation guide for React and Next.js applications with 40+ rules organised by impact level. Designed to help developers eliminate performance bottlenecks and follow best practices.
## Quick reference
### Critical priorities
1. **Defer await until needed** - Move awaits into branches where they're used
2. **Use Promise.all()** - Parallelize independent async operations
3. **Avoid barrel imports** - Import directly from source files
4. **Dynamic imports** - Lazy-load heavy components
5. **Strategic Suspense** - Stream content while showing layout
### Common patterns
**Parallel data fetching:**
```typescript
const [user, posts, comments] = await Promise.all([
fetchUser(),
fetchPosts(),
fetchComments()
])
```
**Direct imports:**
```tsx
// ❌ Loads entire library
import { Check } from 'lucide-react'
// ✅ Loads only what you need
import Check from 'lucide-react/dist/esm/icons/check'
```
**Dynamic components:**
```tsx
import dynamic from 'next/dynamic'
const MonacoEditor = dynamic(
() => import('./monaco-editor'),
{ ssr: false }
)
```
## Using the guidelines
The guidelines live in the references folder at two depths - pick the one that fits the task:
- **[references/react-performance-guidelines.md](references/react-performance-guidelines.md)**: the complete guide with all rules, code examples, and impact analysis. Read this for a full review or audit.
- **[references/rules/](referen