Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# 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
…
The line at the top of this page pins the label git:20260502.38d5305, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
GET https://markdownregistry.com/api/v1/artifacts/art_jmyzvtxdgzkjsgjf
GET https://markdownregistry.com/api/v1/resolve?ref=vodailocz/kilo-kit-mcp/react-patterns
GET https://markdownregistry.com/api/v1/blob/b10579e408d1a03dca9f23c62648c8b669e8a18a9f119a48860b9aa44f397b81
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
vodailocz/kilo-kit-mcp · skills/agent-frameworks/agent-memory/SKILL.md · Use when implementing or managing persistent, hierarchical memory systems for AI agents. Covers cross-session state…
vodailocz/kilo-kit-mcp · skills/agent-frameworks/mcp-agent-patterns/SKILL.md · Use when integrating or optimizing Model Context Protocol (MCP) servers and clients. Keywords: MCP, Model Context…
vodailocz/kilo-kit-mcp · skills/agent-frameworks/workflow-state-machines/SKILL.md · Use when designing, implementing, or debugging complex agentic workflows using state machine patterns. Keywords: state…
vodailocz/kilo-kit-mcp · skills/ai-media/ai-multimodal/SKILL.md · Process and generate multimedia content using Google Gemini API. Capabilities include analyze audio files…
vodailocz/kilo-kit-mcp · skills/ai-media/screenshot/SKILL.md · Use when the user explicitly asks for a desktop or system screenshot (full screen, specific app or window, or a pixel…
