React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.
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
Idiomatic React 18/19 patterns for building robust, accessible, performant component trees.
## When to Activate
- Writing or modifying React function components, custom hooks, or component trees
- Reviewing JSX/TSX files
- Designing state shape or component composition
- Migrating class components or older `forwardRef`/`useEffect`-heavy code
- Choosing between local state, lifted state, context, and external stores
- Working with Server Components / Client Components (Next.js App Router, RSC)
- Implementing forms with React 19 actions or controlled inputs
- Wiring data fetching with TanStack Query / SWR / RSC
## Core Principles
### 1. Render is a Pure Function of Props and State
```tsx
// Good: derive during render
function Cart({ items }: { items: CartItem[] }) {
const total = items.reduce((sum, i) => sum + i.price * i.qty, 0);
return <span>{formatMoney(total)}</span>;
}
// Bad: derived state stored separately
function Cart({ items }: { items: CartItem[] }) {
const [total, setTotal] = useState(0);
useEffect(() => {
setTotal(items.reduce((sum, i) => sum + i.price * i.qty, 0));
}, [items]);
return <span>{formatMoney(total)}</span>;
}
```
…
The line at the top of this page pins the label git:20260702.69ee5ed, 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.
A 17 of 17 checks passed. Fixed automatic checks with no AI involved, so the same checks give the same answer every run.
pass: Frontmatter block present
pass: Frontmatter declares a name
pass: Frontmatter declares a description
pass: Size between 200 bytes and 200 KB (11466 bytes)
pass: No zero-width or bidi control characters
pass: No instruction hidden inside an HTML comment
pass: No link to an exfiltration or paste host
pass: No credential-shaped string
pass: No instruction to send local credentials anywhere
pass: No text hidden with inline styles
pass: No prompt-injection phrasing
pass: No curl or wget piped into a shell
pass: No recursive delete of root, home or parent
pass: No instruction to read or print local credentials
pass: No base64 blob over 200 characters
pass: No link to a raw IP address
pass: No script tag
Source
GitHub
jdanigo/hydraia · 8 stars · license MIT · pushed 2026-09-24 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_xebjch5dgigv5fma
GET https://markdownregistry.com/api/v1/resolve?ref=jdanigo/hydraia/react-patterns
GET https://markdownregistry.com/api/v1/blob/f3208d44a5d553038c42e046cec4dc16e4a3d90a9dbf931f883a2e21919a64a9
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.
jdanigo/hydraia · codex/skills/hydraia/SKILL.md · Codex-native hydraia pipeline. Use when the user asks to build, add, implement, or change a feature, brings a…
jdanigo/hydraia · skills/adr/SKILL.md · Use when a design decision is made that is expensive to reverse, affects multiple components, or rejects a plausible…
jdanigo/hydraia · skills/agency-tier-ui/SKILL.md · Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and…
jdanigo/hydraia · skills/api-design/SKILL.md · Use when designing or reviewing an API surface — REST, GraphQL, or gRPC. Contract-first methodology: the contract…
jdanigo/hydraia · skills/banner-design/SKILL.md · Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with…
jdanigo/hydraia · skills/brainstorming/SKILL.md · You MUST use this before any creative work - creating features, building components, adding functionality, or modifying…
jdanigo/hydraia · skills/caveman/SKILL.md · Ultra-compressed communication mode. Cuts token usage ~75% by speaking like caveman while keeping full technical…
jdanigo/hydraia · skills/db-optimization/SKILL.md · Use when the bottleneck is database-shaped — slow queries, lock timeouts, connection exhaustion, N+1 patterns, index…
jdanigo/hydraia · skills/design-to-code/SKILL.md · Elite render-to-code skill. The user brings a finished website design render (jpg/png); this skill distills it into…
vodailocz/kilo-kit-mcp · skills/engineering/react-patterns/SKILL.md · Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
