# React

> React development patterns and best practices including hooks, state management, and performance optimization. Use when this capability is needed.

- Skill: `tomevault-io/react-5` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/react-5`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/react-5/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- 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-5

---


# React Best Practices

## Component Design
- Keep components small and focused (< 200 lines)
- Prefer functional components with hooks
- Use composition over prop drilling
- Lift state only when needed
- Co-locate related code

## Hooks
- Use useState for local state
- Use useEffect for side effects (with cleanup)
- Use useCallback for stable function references
- Use useMemo for expensive computations
- Use useRef for mutable values
- Always include all dependencies in dependency arrays
- Create custom hooks for reusable logic

## Performance
- Use React.memo for expensive pure components
- Lazy load routes with React.lazy
- Use Suspense for loading states
- Use keys properly in lists (never use index as key)
- Avoid inline object/function creation in JSX
- Use React DevTools Profiler

## State Management
- Start with local state + prop drilling
- Use Context for theme/auth/locale
- Use Zustand/Jotai for simple global state
- Use React Query/TanStack Query for server state
- Use Redux Toolkit for complex client state

## Patterns
- Container/Presentational components
- Compound components for flexibility
- Render props for sharing logic
- Custom hooks for logic reuse

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