react-patterns
Component patterns, hooks, state management, and performance optimization for React applications
Profile →npx skills add cosmicstack-labs/mercury-agent-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 Build React applications that are composable, performant, and maintainable. ## Core Principles ### 1. Composition Over Configuration Build small, focused components and compose them. Avoid giant components with many configuration props. Children and slots are your friends. ### 2. State Management Is About Proximity Keep state as close to where it's used as possible. Lift state up only when truly shared. Context is not a state management solution. ### 3. Derive, Don't Duplicate Derived state (computed from existing state) should never be stored separately. Use `useMemo` for expensive derivations, compute inline for cheap ones. ### 4. Effects Are Escape Hatches `useEffect` is for synchronizing with external systems (API, DOM, subscriptions). Don't use it for derived state or event handlers. --- ## React Patterns Maturity Model | Level | Components | State | Effects | Performance | |-------|------------|-------|---------|-------------| | **1: Basic** | Class components, mix of concerns | Local state only | Raw useEffects | Not considered | | **2: Foundational** | Functional components, some hooks | Lifting state, some context | Cleanup in effects | React.memo basics |
- Core Principles
- 1. Composition Over Configuration
- 2. State Management Is About Proximity
- 3. Derive, Don't Duplicate
- 4. Effects Are Escape Hatches
- React Patterns Maturity Model
- Actionable Guidance
- Component Patterns
- State Management
- Performance Optimization
- Common Anti-Patterns
- Common Mistakes
What does the react-patterns skill do?
Component patterns, hooks, state management, and performance optimization for React applications
How do I install it?
Run `npx skills add cosmicstack-labs/mercury-agent-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 cosmicstack-labs/mercury-agent-skills, a repository with 364 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.