React Patterns

A solid reference guide that covers the essentials without drowning you in theory. It walks through component design principles, hook patterns, state management decisions, and React 19's new hooks like useActionState and useOptimistic. The tables are actually useful for quick lookups on when to extract custom hooks or which state solution fits your complexity level. It includes a practical anti-patterns section that calls out common mistakes like prop drilling and premature optimization. The file structure diagram gives you a concrete starting point for organizing larger apps. Best used when you're setting up a new React project or need to justify architectural decisions to your team.

skills.sh installs: 970
GitHub stars: 43.1K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add sickn33/antigravity-awesome-skills --skill react-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

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; React’s use API is an exception that can be called in loops/conditions inside a component or Hook (not in try/catch); see use
Same order every render
Custom hooks start with "use"
Clean up effects on unmount