# React

> React development patterns and best practices including hooks, state management, and performance optimization.

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

---


# 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