react-patterns
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
Profile →npx skills add sickn33/agentic-awesome-skills --skill react-patterns --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 | |-
- 1. Component Design Principles
- Component Types
- Design Rules
- 2. Hook Patterns
- When to Extract Hooks
- Hook Rules
- 3. State Management Selection
- State Placement
- 4. React 19 Patterns
- New Hooks
- Compiler Benefits
- 5. Composition Patterns
- Compound Components
- Render Props vs Hooks
What does the react-patterns skill do?
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill react-patterns --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.