react

Instruction file imported from eclipse-editdor/editdor (.github/instructions/react.instructions.md). Copyright stays with the author.

Project Context

• Latest React version (React 18)
• TypeScript for type safety (when applicable)
• Functional components with hooks as default
• Follow React's official style guide and best practices
• Implement proper component composition and reusability patterns

Development Standards

Architecture

• Use functional components with hooks as the primary pattern
• Implement component composition over inheritance
• Organize components by feature or domain for scalability
• Separate presentational and container components clearly
• Use custom hooks for reusable stateful logic
• Implement proper component hierarchies with clear data flow
• Use functional components + hooks only. No class components.
• Follow the Rules of Hooks (no conditional hooks; correct deps).
• Use React.FC only when the component uses children; otherwise prefer typed props without React.FC.
• Prefer composition over inheritance.
• Use useMemo/useCallback only when it clearly helps (avoid premature memoization).

TypeScript Integration

• Use TypeScript interfaces for props, state, and component definitions
• Define proper types for event handlers and refs
• Implement generic components where appropriate
• Use strict mode in tsconfig.json for type safety
• Create union types for component variants and states

Component Design

• Follow the single responsibility principle for components
• Use descriptive and consistent naming conventions
• Implement proper prop validation with TypeScript or PropTypes
• Design components to be testable and reusable
• Keep components small and focused on a single concern
• Use composition patterns (render props, children as functions)

State Management

• Use useState for local component state
• Implement useReducer for complex state logic
• Leverage useContext for sharing state across component trees
• Consider external state management (Redux Toolkit, Zustand) for complex applications
• Implement proper state normalization and data structures

Hooks and Effects

• Use useEffect with proper dependency arrays to avoid infinite loops
• Implement cleanup functions in effects to prevent memory leaks
• Use useMemo and useCallback for performance optimization when needed
• Create custom hooks for reusable stateful logic
• Follow the rules of hooks (only call at the top level)
• Use useRef for accessing DOM elements and storing mutable values

Performance Optimization

• Use React.memo for component memoization when appropriate
• Implement code splitting with React.lazy and Suspense
• Optimize bundle size with tree shaking and dynamic imports
• Use useMemo and useCallback judiciously to prevent unnecessary re-renders
• Implement virtual scrolling for large lists
• Profile components with React DevTools to identify performance bottlenecks

Data Fetching

• Implement proper loading, error, and success states
• Handle race conditions and request cancellation
• Use optimistic updates for better user experience
• Implement proper caching strategies
• Handle offline scenarios and network errors gracefully

Error Handling

• Implement Error Boundaries for component-level error handling
• Use proper error states in data fetching
• Implement fallback UI for error scenarios
• Log errors appropriately for debugging
• Handle async errors in effects and event handlers
• Provide meaningful error messages to users

Forms and Validation

• Use controlled components for form inputs
• Implement proper form validation with libraries like Formik, React Hook Form
• Handle form submission and error states appropriately
• Implement accessibility features for forms (labels, ARIA attributes)
• Use debounced validation for better user experience
• Handle file uploads and complex form scenarios

Routing

• Use React Router for client-side routing
• Implement nested routes and route protection
• Handle route parameters and query strings properly
• Implement lazy loading for route-based code splitting
• Use proper navigation patterns and back button handling
• Implement breadcrumbs and navigation state management

Testing

• Write unit tests for components using React Testing Library
• Test component behavior, not implementation details
• Implement integration tests for complex component interactions
• Mock external dependencies and API calls appropriately
• Test accessibility features and keyboard navigation

Security

• Sanitize user inputs to prevent XSS attacks
• Validate and escape data before rendering
• Use HTTPS for all external API calls
• Implement proper authentication and authorization patterns
• Avoid storing sensitive data in localStorage or sessionStorage
• Use Content Security Policy (CSP) headers

Accessibility

• Use semantic HTML elements appropriately
• Implement proper ARIA attributes and roles
• Ensure keyboard navigation works for all interactive elements
• Provide alt text for images and descriptive text for icons
• Implement proper color contrast ratios
• Test with screen readers and accessibility tools

Additional Guidelines

• Follow React's naming conventions (PascalCase for components, camelCase for functions)
• Use meaningful commit messages and maintain clean git history
• Implement proper code splitting and lazy loading strategies
• Document complex components and custom hooks with JSDoc
• Use ESLint and Prettier for consistent code formatting
• Keep dependencies up to date and audit for security vulnerabilities
• Implement proper environment configuration for different deployment stages
• Use React Developer Tools for debugging and performance analysis

Common Patterns

• Higher-Order Components (HOCs) for cross-cutting concerns
• Render props pattern for component composition
• Compound components for related functionality
• Provider pattern for context-based state sharing
• Container/Presentational component separation
• Custom hooks for reusable logic extraction