ReddRadar
Agent skill
react-patterns
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
Install this agent skill to your Project
npx add-skill https://github.com/sickn33/antigravity-awesome-skills/tree/main/plugins/antigravity-awesome-skills-claude/skills/react-patterns
SKILL.md
React Patterns
Principles for building production-ready React applications.
1. Component Design Principles
Component Types
| Type | Use | State |
|---|---|---|
| Server | Data fetching, static | None |
| Client | Interactivity | useState, effects |
| Presentational | UI display | Props only |
| Container | Logic/state | Heavy state |
Design Rules
- One responsibility per component
- Props down, events up
- Composition over inheritance
- Prefer small, focused components
2. Hook Patterns
When to Extract Hooks
| Pattern | Extract When |
|---|---|
| useLocalStorage | Same storage logic needed |
| useDebounce | Multiple debounced values |
| useFetch | Repeated fetch patterns |
| useForm | Complex form state |
Hook Rules
- Hooks at top level only
- Same order every render
- Custom hooks start with "use"
- Clean up effects on unmount
3. State Management Selection
| Complexity | Solution |
|---|---|
| Simple | useState, useReducer |
| Shared local | Context |
| Server state | React Query, SWR |
| Complex global | Zustand, Redux Toolkit |
State Placement
| Scope | Where |
|---|---|
| Single component | useState |
| Parent-child | Lift state up |
| Subtree | Context |
| App-wide | Global store |
4. React 19 Patterns
New Hooks
| Hook | Purpose |
|---|---|
| useActionState | Form submission state |
| useOptimistic | Optimistic UI updates |
| use | Read resources in render |
Compiler Benefits
- Automatic memoization
- Less manual useMemo/useCallback
- Focus on pure components
5. Composition Patterns
Compound Components
- Parent provides context
- Children consume context
- Flexible slot-based composition
- Example: Tabs, Accordion, Dropdown
Render Props vs Hooks
| Use Case | Prefer |
|---|---|
| Reusable logic | Custom hook |
| Render flexibility | Render props |
| Cross-cutting | Higher-order component |
6. Performance Principles
When to Optimize
| Signal | Action |
|---|---|
| Slow renders | Profile first |
| Large lists | Virtualize |
| Expensive calc | useMemo |
| Stable callbacks | useCallback |
Optimization Order
- Check if actually slow
- Profile with DevTools
- Identify bottleneck
- Apply targeted fix
7. Error Handling
Error Boundary Usage
| Scope | Placement |
|---|---|
| App-wide | Root level |
| Feature | Route/feature level |
| Component | Around risky component |
Error Recovery
- Show fallback UI
- Log error
- Offer retry option
- Preserve user data
8. TypeScript Patterns
Props Typing
| Pattern | Use |
|---|---|
| Interface | Component props |
| Type | Unions, complex |
| Generic | Reusable components |
Common Types
| Need | Type |
|---|---|
| Children | ReactNode |
| Event handler | MouseEventHandler |
| Ref | RefObject<Element> |
9. Testing Principles
| Level | Focus |
|---|---|
| Unit | Pure functions, hooks |
| Integration | Component behavior |
| E2E | User flows |
Test Priorities
- User-visible behavior
- Edge cases
- Error states
- Accessibility
10. Anti-Patterns
| ❌ Don't | ✅ Do |
|---|---|
| Prop drilling deep | Use context |
| Giant components | Split smaller |
| useEffect for everything | Server components |
| Premature optimization | Profile first |
| Index as key | Stable unique ID |
Remember: React is about composition. Build small, combine thoughtfully.
When to Use
This skill is applicable to execute the workflow or actions described in the overview.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
sickn33/antigravity-awesome-skills
obsidian-clipper-template-creator
Guide for creating templates for the Obsidian Web Clipper. Use when you want to create a new clipping template, understand available variables, or format clipped content.
sickn33/antigravity-awesome-skills
claude-code-expert
Especialista profundo em Claude Code - CLI da Anthropic. Maximiza produtividade com atalhos, hooks, MCPs, configuracoes avancadas, workflows, CLAUDE.md, memoria, sub-agentes, permissoes e integracao com ecossistemas.
sickn33/antigravity-awesome-skills
lex
Centralized 'Truth Engine' for cross-jurisdictional legal context (US, EU, CA) and contract scaffolding.
sickn33/antigravity-awesome-skills
odoo-inventory-optimizer
Expert guide for Odoo Inventory: stock valuation (FIFO/AVCO), reordering rules, putaway strategies, routes, and multi-warehouse configuration.
sickn33/antigravity-awesome-skills
android_ui_verification
Automated end-to-end UI testing and verification on an Android Emulator using ADB.
sickn33/antigravity-awesome-skills
seo-cannibalization-detector
Analyzes multiple provided pages to identify keyword overlap and potential cannibalization issues. Suggests differentiation strategies. Use PROACTIVELY when reviewing similar content.
Didn't find tool you were looking for?