React Patterns
A reference guide that covers modern React development from hooks to TypeScript patterns. You get quick lookup tables for state management decisions (when to use Context vs Zustand), performance optimization triggers, and React 19's new hooks like useActionState and useOptimistic. The anti-patterns section alone is worth having around. It's laid out as scannable tables rather than prose, which makes it genuinely useful when you're mid-task trying to remember whether to extract that custom hook or deciding where state should live. Treats composition as the organizing principle throughout, which is the right lens for React work.
- skills.sh installs
- 503
- GitHub stars
- 33.2K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add davila7/claude-code-templates --skill react-patterns --agent claude-codeInstalls 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
- 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
Sponsors
Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthly
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any language
Agent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/davila7/claude-code-templates
- Categories
- Frontend Development, Debugging
- First seen
- Jun 3, 2026
More from davila7/claude-code-templates
All 618- Executing Marketing Campaigns498
- React Dev498
- Knowledge Distillation497
- Rag Implementation497
- Coding Standards494
- Api Documentation Generator493
- Autonomous Agents492
- Backend Dev Guidelines492
- Database Schema Designer489
- Typescript Expert489
- Api Patterns486
- Skill Creator484
- Supabase Postgres Best Practices481
- File Organizer480
- Research Engineer478
- Llama Cpp475
- App Builder474
- Security Review471
- Api Security Best Practices466
- Senior Secops466
- Long Context465
- Autogpt Agents464
- Parallel Agents463
- Serving Llms Vllm461
Recommended
More Frontend Development1
react-devdavila7/claude-code-templatesThis skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components a498skills.sh installs
react-devdavila7/claude-code-templatesThis skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components a498skills.sh installs2
nextjs-developmentmanutej/luxor-claude-marketplaceComprehensive Next.js development skill covering App Router, Server Components, data fetching, routing patterns, API routes, middleware, and full-stack Next.js 473skills.sh installs
nextjs-developmentmanutej/luxor-claude-marketplaceComprehensive Next.js development skill covering App Router, Server Components, data fetching, routing patterns, API routes, middleware, and full-stack Next.js 473skills.sh installs3react-developmentmanutej/luxor-claude-marketplaceComprehensive React development with hooks, components, state management, context, effects, and performance optimization based on official React documentation468skills.sh installs
react-developmentmanutej/luxor-claude-marketplaceComprehensive React development with hooks, components, state management, context, effects, and performance optimization based on official React documentation468skills.sh installs4
zustandpproenca/dot-skillsZustand state management best practices for React applications. Use when writing, reviewing, or refactoring Zustand stores to ensure optimal performance and mai453skills.sh installs
zustandpproenca/dot-skillsZustand state management best practices for React applications. Use when writing, reviewing, or refactoring Zustand stores to ensure optimal performance and mai453skills.sh installs5
solidjssuryavirkapur/skillsSolidJS framework development skill for building reactive web applications with fine-grained reactivity. Use when working with SolidJS projects including: (1) C452skills.sh installs
solidjssuryavirkapur/skillsSolidJS framework development skill for building reactive web applications with fine-grained reactivity. Use when working with SolidJS projects including: (1) C452skills.sh installs6nextjs-supabase-authdavila7/claude-code-templatesExpert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected rou410skills.sh installs
nextjs-supabase-authdavila7/claude-code-templatesExpert integration of Supabase Auth with Next.js App Router Use when: supabase auth next, authentication next.js, login supabase, auth middleware, protected rou410skills.sh installs