# React Patterns

> Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.

- Skill: `dokhacgiakhoa/react-patterns` (Agent Skill, multi-file: 17 files)
- Install (CLI): `npx skillmds@latest add dokhacgiakhoa/react-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dokhacgiakhoa/react-patterns/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Dokhacgiakhoa (https://skillmd.com/u/dokhacgiakhoa)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/dokhacgiakhoa/react-patterns

---


# React Patterns

> Principles for building production-ready React applications.

---

## 1. Component Design Principles

## 🧠 Knowledge Modules (Fractal Skills)

### 1. [Component Types](./sub-skills/component-types.md)
### 2. [Design Rules](./sub-skills/design-rules.md)
### 3. [When to Extract Hooks](./sub-skills/when-to-extract-hooks.md)
### 4. [Hook Rules](./sub-skills/hook-rules.md)
### 5. [State Placement](./sub-skills/state-placement.md)
### 6. [New Hooks](./sub-skills/new-hooks.md)
### 7. [Compiler Benefits](./sub-skills/compiler-benefits.md)
### 8. [Compound Components](./sub-skills/compound-components.md)
### 9. [Render Props vs Hooks](./sub-skills/render-props-vs-hooks.md)
### 10. [When to Optimize](./sub-skills/when-to-optimize.md)
### 11. [Optimization Order](./sub-skills/optimization-order.md)
### 12. [Error Boundary Usage](./sub-skills/error-boundary-usage.md)
### 13. [Error Recovery](./sub-skills/error-recovery.md)
### 14. [Props Typing](./sub-skills/props-typing.md)
### 15. [Common Types](./sub-skills/common-types.md)
### 16. [Test Priorities](./sub-skills/test-priorities.md)