react-patterns

Guide React developers in designing composable components with state and effect management.

364|53|Updated May 9, 2026

Search Tags:#react #components #hooks #state-management #memoization #performance-optimization #useeffect

Ready to run

npx skills add https://github.com/cosmicstack-labs/mercury-agent-skills --skill react-patterns-cosmicstack-labs

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-patterns
Source: https://github.com/cosmicstack-labs/mercury-agent-skills/tree/main/categories/frontend/react-patterns
Command: npx skills add https://github.com/cosmicstack-labs/mercury-agent-skills --skill react-patterns-cosmicstack-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React apps often become hard to maintain and slow to render when state, effects, and component boundaries are handled inconsistently.

Core Features & Use Cases

Composition-first component architecture: Promote small, focused components and compound patterns that share implicit state via children/slots.
Correct state/effect separation: Keep state near where it’s used, derive computed values instead of storing them, and reserve effects for synchronization with external systems.
Performance discipline: Apply memoization rules (React.memo, useMemo, useCallback), plus scalability techniques like code splitting and virtualization for large lists.
Practical guidance and anti-patterns: Reduce bugs and re-render churn by avoiding big effects, prop drilling overload, context sprawl, and over-optimization.

Quick Start

Ask an AI to “refactor this React component to follow composition and correct state/effect patterns, then improve performance using memoization and list virtualization where appropriate.”

Frequently Asked Questions about react-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I structure composable React components to avoid prop drilling and context sprawl?▼

Build composable React components using compound patterns that share implicit state via children or slots. This composition-first architecture keeps components small, focused, and avoids prop drilling overload and context sprawl anti-patterns.

When should I use useEffect for state synchronization in React?▼

Reserve useEffect for synchronizing with external systems, not for deriving computed values. Keep state near where it is used and derive computed values directly during render instead of storing them in state or syncing them through large effects.

What is the best way to optimize React performance for large lists and heavy re-renders?▼

Optimize React performance by applying memoization rules using React.memo, useMemo, and useCallback. For large lists, apply scalability techniques like code splitting and virtualization to reduce re-render churn and rendering workloads.

Why does storing derived state in React component state cause bugs?▼

Storing derived state in React component state causes bugs and unnecessary re-render churn because it duplicates data. You should derive computed values directly during render instead of storing them, avoiding the derived state in state anti-pattern.

Can I use React memoization for every component to prevent re-renders?▼

Applying React memoization to every component causes over-optimization. You should follow strict memoization strategy selection rules, applying React.memo, useMemo, and useCallback only where they prevent measurable re-render churn rather than indiscriminately.