react-cursorrules

---
description: Expert React best practices and patterns for Cursor AI code generation
globs:
  - "**/*.js"
  - "**/*.jsx"
  - "**/*.ts"
  - "**/*.tsx"
alwaysApply: true
---

## Component Design and Composition

- Prefer functional components with React Hooks over class components.
- Keep components focused and reusable; avoid monolithic components.
- Use composition over inheritance for code reuse.
- Avoid unnecessary re-renders by memoizing components with `React.memo` when appropriate.

## State Management

- Use `useState` for simple state management; for complex state logic, consider `useReducer`.
- Avoid unnecessary state variables; derive data during render when possible to reduce complexity.
- When updating state based on previous state, use the functional update form: `setState(prev => newState)`.
- Avoid storing derived data in state; compute it during render or use `useMemo` if expensive.

## useEffect Hook

- Use `useEffect` for synchronizing with external systems (e.g., subscriptions, timers, logging).
- Avoid using `useEffect` for transforming data or communicating with parent components; compute values during render instead.
- Always specify all reactive dependencies in the dependency array to prevent stale closures and bugs.
- Clean up side effects by returning a cleanup function from `useEffect` to prevent memory leaks.
- Avoid calling `setState` inside `useEffect` unless necessary; if used, ensure it doesn't cause infinite loops or redundant renders.
- Do not use `useEffect` for initializing state from props; instead, derive state during render or use `useMemo`.

## Event Handling

- Define event handlers inside the component scope; use `useCallback` to memoize them if passing to child components to prevent unnecessary re-renders.
- Avoid defining functions inside JSX; define them outside to maintain referential integrity.

## Lists and Keys

- When rendering lists, provide a unique and stable `key` prop for each item to help React identify which items have changed.
- Avoid using array indices as keys unless the list is static and will not change.

## Forms and Controlled Components

- Prefer controlled components for form inputs to have explicit control over their values.
- Avoid mixing controlled and uncontrolled components; choose one approach per input.
- Validate form inputs and manage form state explicitly to prevent unexpected behavior.

## Performance Optimization

- Use `useMemo` to memoize expensive computations during render.
- Use `useCallback` to memoize functions passed to child components to prevent unnecessary re-renders.
- Avoid unnecessary state updates; ensure that state changes only when necessary to reduce render cycles.

## General Best Practices

- Do not perform side effects directly in the render body; use `useEffect` for side effects.
- Avoid prop drilling by lifting state up or using context when multiple components need access to the same data.
- Ensure that hooks are called unconditionally and in the same order on every render to maintain the rules of hooks.
- Keep components pure; avoid side effects during rendering to ensure predictable behavior.