React Patterns

A comprehensive reference for modern React that covers the full spectrum: hooks discipline, the RSC server/client split, Suspense boundaries, form actions with useActionState, and a clear decision tree for when to reach for context versus an external store. The accessibility and composition sections are solid, and the state location flowchart alone will save you from overengineering. Especially useful when reviewing code or making architectural calls about data fetching strategies. The examples are concrete, the anti-patterns are called out with working alternatives, and it steers you toward idiomatic React 19 patterns without the usual framework blog post fluff.

skills.sh installs: 5.9K
GitHub stars: 300.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/ecc --skill react-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

React Patterns

Idiomatic React 18/19 patterns for building robust, accessible, performant component trees.

When to Activate

Writing or modifying React function components, custom hooks, or component trees
Reviewing JSX/TSX files
Designing state shape or component composition
Migrating class components or older forwardRef/useEffect-heavy code
Choosing between local state, lifted state, context, and external stores
Working with Server Components / Client Components (Next.js App Router, RSC)
Implementing forms with React 19 actions or controlled inputs
Wiring data fetching with TanStack Query / SWR / RSC

Core Principles

1. Render is a Pure Function of Props and State

// Good: derive during render
function Cart({ items }: { items: CartItem[] }) {
  const total = items.reduce((sum, i) => sum + i.price * i.qty, 0);
  return <span>{formatMoney(total)}</span>;
}

// Bad: derived state stored separately
function Cart({ items }: { items: CartItem[] }) {
  const [total, setTotal] = useState(0);
  useEffect(() => {
    setTotal(items.reduce((sum, i) => sum + i.price * i.qty, 0));
  }, [items]);
  return <span>{formatMoney(total)}</span>;
}

SKILL.md on GitHub