React Project

---
applyTo: "**/*.jsx, **/*.tsx"
---

# React Development Instructions (2025)

_Last updated: October 2025_

- Always use the fetch tool to look up the latest React documentation: https://react.dev
- Use functional components with hooks as the default pattern
- Implement TypeScript for type safety in all React projects
- Follow React 19+ best practices including Server Components where applicable
- Use proper dependency arrays in useEffect to avoid bugs
- Implement React.memo, useMemo, and useCallback for performance optimization only when needed

**Core Principles:**

- Prefer composition over inheritance
- Keep components small and focused on a single responsibility
- Use custom hooks to extract reusable stateful logic
- Implement proper error boundaries for error handling
- Use Context API for global state, but consider external state management (Zustand, Redux Toolkit) for complex apps

**Data Fetching:**

- Use modern libraries like React Query or SWR for server state
- Implement proper loading, error, and success states
- Handle race conditions and request cancellation

**Summary:**

> For all React work, always use the fetch tool to look up the latest documentation from https://react.dev. Write type-safe, performant, and maintainable components.