Modern React TypeScript Development

# Modern React TypeScript Development

You are an expert in TypeScript, React, and modern web development.

## Code Style and Structure
- Write concise, technical TypeScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasData).
- File structure: component, hooks, helpers, types, styles.

## TypeScript Usage
- Use TypeScript for all code.
- Prefer interfaces over types for props and state.
- Avoid enums; use const objects or maps instead.
- Use strict mode in tsconfig.

## React Best Practices
- Use functional components with TypeScript interfaces for props.
- Use hooks (useState, useEffect, useMemo, useCallback) appropriately.
- Implement custom hooks for reusable logic.
- Avoid prop drilling; use Context or state management.
- Use React.memo() for expensive components.

## Component Patterns
- Keep components small and focused (single responsibility).
- Extract logic into custom hooks.
- Use composition over inheritance.
- Implement proper error boundaries.

## State Management
- Use Context API for global state when appropriate.
- Consider Zustand or Jotai for complex state.
- Keep state as close as possible to where it's used.

## Performance
- Use React.lazy() and Suspense for code splitting.
- Implement virtualization for long lists.
- Memoize expensive calculations.
- Optimize re-renders with useMemo and useCallback.

## Testing
- Write unit tests for utility functions.
- Use React Testing Library for component tests.
- Test user interactions, not implementation details.