skills.rest
involvex
involvexCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-patterns

Provides React design principles covering hooks, composition, state management, performance, and TypeScript patterns.

Updated Mar 1, 2026
Search Tags:#typescript#performance#state management#React#frontend#hooks#component design
One-click install
npx skills add https://github.com/involvex/dev --skill react-patterns-involvex
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-patterns
Source: https://github.com/involvex/dev/tree/main/.claude/skills/react-patterns
Command: npx skills add https://github.com/involvex/dev --skill react-patterns-involvex

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? React developers often struggle with inconsistent component design, unclear state management choices, and premature optimization. This Skill provides a structured reference of proven React patterns and principles to guide architectural decisions and avoid common anti-patterns. ## Core Features & Use Cases - Component Design Guidance: Defines component types (server, client, presentational, container) and rules like composition over inheritance and one responsibility per component. - State Management Selection: Decision tables mapping complexity levels to solutions such as useState, Context, React Query, Zustand, or Redux Toolkit. - React 19 & Performance Patterns: Covers new hooks like useActionState and useOptimistic, plus a profile-first optimization workflow. - Use Case: When building a new feature, consult this Skill to decide whether to lift state up, use Context, or adopt a global store, and to check your component against the anti-patterns list before shipping. ## Quick Start Review my React component and suggest improvements based on modern React patterns and best practices.

Frequently Asked Questions about react-patterns

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

FAQPage Schema
How do I choose between Context, Zustand, and Redux for React state management?▼

Choose based on complexity: useState or useReducer for simple local state, Context for shared subtree state, React Query or SWR for server state, and Zustand or Redux Toolkit for complex global state. Match the tool to the actual scope of the data.

When should I extract logic into a custom React hook?▼

Extract a custom hook when the same logic repeats across components, such as localStorage access, debounced values, fetch patterns, or complex form state. Custom hooks must start with "use" and follow the rules of hooks.

What are the new hooks in React 19?▼

React 19 introduces useActionState for form submission state, useOptimistic for optimistic UI updates, and the use hook for reading resources during render. The React Compiler also reduces the need for manual useMemo and useCallback.

When should I use useMemo and useCallback in React?▼

Only after profiling shows an actual performance problem. Follow the optimization order: verify slowness, profile with DevTools, identify the bottleneck, then apply a targeted fix. Premature memoization is an anti-pattern.

What are common React anti-patterns to avoid?▼

Avoid deep prop drilling (use Context instead), giant components (split them smaller), overusing useEffect, premature optimization, and using array indexes as keys. Prefer stable unique IDs and composition-based design.

Related Skills

Explore More Software Engineering Skills→
The-AIOSThe-AIOS
15

web-artifacts-builder

Automate setup, development, and bundling of React web artifacts with Vite.

Official
Intermediate
metric-space-aimetric-space-ai
2

cloudflare-deploy

Deploy Cloudflare applications and infrastructure using Workers and Pages.

Official
Intermediate
olehsvyrydovolehsvyrydov
13

frontend-reviewer

Automate React/TypeScript code review for style, accessibility, and linting gaps.

Community
Intermediate
rnavarychrnavarych
14

role-frontend:react-expert

Provide React 19 expertise for Next.js 15 and Remix applications.

Community
Advanced