# React Patterns

> Build React components with proper composition, state management, and performance patterns.

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

---


# React Patterns

## Component Design
- **Single responsibility**: one component, one concern
- **Composition over props**: compound components pattern instead of boolean props
- **Presentational vs container**: separate rendering from logic
- **Small components**: if it's >100 lines, extract

## Hooks Rules
- Only call hooks at the top level (not in conditions, loops, callbacks)
- Only call hooks from React functions
- `useEffect` dependencies must be exhaustive (use the linter rule)
- Custom hooks start with `use` and compose primitive hooks

## Performance
- `React.memo` for pure components that re-render often with same props
- `useMemo`/`useCallback` for expensive computations (measure first!)
- Virtualize long lists (`react-window`, `react-virtuoso`)
- Lazy load routes and heavy components (`React.lazy`, `Suspense`)
- Avoid passing new objects/arrays as props (use `useMemo` or stable references)

## State Management
- **Local state first**: `useState` > `useReducer` > context > external library
- **Context** for shared global state (theme, auth, locale)
- **Zustand/Redux** only when state logic is truly complex or shared across many components
- Colocate state with the component that needs it