# React Patterns

> Write React components with minimal state, proper memoization, and type-safe patterns. Use when creating components, managing state, or optimizing renders. Use when this capability is needed.

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

---


# React Patterns

Core React patterns for component design, state management, and optimization.

## State Philosophy

Avoid state variables. Prefer derived values and props. Scope state to the smallest subtree that needs it. Use discriminated unions for complex state.

See [state-management.md](references/state-management.md) for:

- Derived values over state
- Component boundaries for state scoping
- Context API patterns
- Zustand for complex state
- State machines over multiple useState

## Memoization

Required for any O(n) operation. Memoize atomically to minimize dependency arrays. Use Loader/Inner pattern to narrow types before useMemo.

See [memoization.md](references/memoization.md) for:

- When to useMemo
- Atomic memoization
- useCallback for handlers
- Loader/Inner pattern for type narrowing

## Conditional Logic

Use affirmative logic, explicit conditionals, and ternaries over `&&`. Early returns for guard clauses.

See [conditional-logic.md](references/conditional-logic.md) for:

- Affirmative logic
- Explicit conditionals
- Conditional rendering
- Type narrowing with conditionals
- Early returns

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/casper-studios) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->