react-patterns
A collection of modern React patterns and best practices for building scalable, performance-oriented components.
Install
mkdir -p .claude/skills/react-patterns && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/880" && unzip -o skill.zip -d .claude/skills/react-patterns && rm skill.zipInstalls to .claude/skills/react-patterns
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.Key capabilities
- →Implement component design principles
- →Extract logic into custom hooks
- →Select state management strategies
- →Apply React 19 patterns
- →Optimize performance via profiling
- →Configure error boundaries
How it works
Provides architectural guidance based on component types, hook rules, and state placement strategies. It emphasizes composition and targeted performance fixes.
Inputs & outputs
When to use react-patterns
- →Refactoring a component to use custom hooks
- →Selecting a state management strategy for a complex app
- →Applying React 19 optimistic UI updates
- →Optimizing component performance via memoization
About this skill
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 not to use it
- →Premature optimization without profiling
- →Using useEffect for logic that belongs in server components
Prerequisites
Limitations
- →Requires manual profiling before applying performance optimizations
- →Does not automate code changes directly
How it compares
Offers structured, pattern-based refactoring guidance rather than generic coding advice.
Compared to similar skills
react-patterns side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| react-patterns (this skill) | 9 | 6mo | No flags | Intermediate |
| frontend-code-review | 11 | 2mo | No flags | Advanced |
| creating-styled-wrappers | 1 | 4mo | No flags | Intermediate |
| next-best-practices | 0 | 3mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by davila7
View all by davila7 →You might also like
frontend-code-review
langgenius
Trigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support both pending-change reviews and focused file reviews while applying the checklist rules.
creating-styled-wrappers
tambo-ai
Creates styled wrapper components that compose headless/base compound components. Use when refactoring styled components to use base primitives, implementing opinionated design systems on top of headless components, or when the user mentions "use base components", "compose primitives", "styled wrapper", or "refactor to use base".
next-best-practices
pedronauck
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
typescript
lobehub
TypeScript code style and optimization guidelines. Use when writing TypeScript code (.ts, .tsx, .mts files), reviewing code quality, or implementing type-safe patterns. Triggers on TypeScript development, type safety questions, or code style discussions.
typescript-skills
llama-farm
Shared TypeScript best practices for Designer and Electron subsystems.
code-standards
redpanda-data
TypeScript, React, and JavaScript best practices enforced by Ultracite/Biome.