React Kprsnt2

---
name: react
description: React development patterns and best practices including hooks, state management, and performance optimization.
globs: ["**/*.jsx", "**/*.tsx", "**/next.config.*", "**/vite.config.*"]
priority: 95
tags: ["framework"]
---

# 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