skills.rest
samChang72
samChang72COMMUNITY
Explore all skills by this author →
GitHub

react-patterns

Guide React developers through modern component, hook, and state management patterns.

1|Updated Feb 2, 2026
Search Tags:#testing#best practices#performance#state management#react#hooks#patterns
One-click install
npx skills add https://github.com/samChang72/custom-skills --skill react-patterns-samchang72
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-patterns
Source: https://github.com/samChang72/custom-skills/tree/main/gemini/skills/react-patterns
Command: npx skills add https://github.com/samChang72/custom-skills --skill react-patterns-samchang72

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to modern React patterns, solving the problem of inefficient and outdated practices in React development.

Core Features & Use Cases

  • Component Design Principles: Offers best practices for component types, including server, client, presentational, and container components.
  • Hook Patterns: Teaches when and how to extract hooks, with detailed rules for using them effectively.
  • State Management: Covers state management strategies for different complexity levels, including useState, useReducer, Context, React Query, SWR, Zustand, and Redux Toolkit.
  • Performance Optimization: Guides on performance principles, including when to optimize, optimization order, and error handling.
  • Testing Principles: Provides insights into testing at unit, integration, and end-to-end levels.
  • TypeScript Patterns: Offers best practices for props typing, common types, and using TypeScript effectively in React.
  • Anti-Patterns: Lists common anti-patterns and their alternatives to improve code quality.
  • New Hooks: Introduces new hooks like useActionState, useOptimistic, and use for better development practices.

Quick Start

To understand the core concepts, read the section on Component Design Principles.

Frequently Asked Questions about react-patterns

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

FAQPage Schema
What are the best practices for React state management across different complexity levels?▼

React state management best practices range from using useState for local state to useReducer and Context for moderate complexity, scaling up to React Query, SWR, Zustand, or Redux Toolkit for advanced global state requirements.

How do I optimize React performance and know when to start?▼

React performance optimization requires following a specific order of principles, starting with identifying bottlenecks, applying targeted optimizations, and ensuring proper error handling to prevent unnecessary re-renders and bottlenecks.

When should I extract custom hooks in React and what rules apply?▼

Extracting custom React hooks should follow specific rules for effective usage, separating complex component logic into reusable functions to improve code quality, readability, and maintainability across your application.

How do I type React component props with TypeScript effectively?▼

Typing React component props with TypeScript involves applying best practices for common types, ensuring strict type safety for props, and leveraging TypeScript effectively to catch errors during development.

What are common React anti-patterns and how do I avoid them?▼

Common React anti-patterns include outdated component structures and improper hook usage; replacing them with modern alternatives like presentational and container components improves overall code quality.

Does this React patterns guide cover testing principles for hooks and components?▼

Testing principles for React cover unit, integration, and end-to-end levels, providing specific insights into how to effectively test components, hooks, and overall application behavior.

Related Skills

Explore More Software Engineering Skills→
telum-aitelum-ai
2

project-import

Create a Speck project structure with a skeleton project.md file.

Official
Basic
AbdullahmohammadarefAbdullahmohammadaref

react-testing

Guide React component testing with Testing Library, user-event, Playwright, and axe-core.

Community
Advanced
MinhAnh-CorpMinhAnh-Corp

react-state-management

Provide structured React state management patterns for local, global, and server state.

Official
Advanced
Eva813Eva813
2

react-agent

Guide React development with state management and render optimization decisions.

Community
Intermediate