Instruction file imported from yldgio/vibe-vscode (.github/instructions/react-ts.instructions.md). Copyright stays with the author.

React Best Practices

Apply the general coding guidelines to all code.

TypeScript Guidelines

• Use TypeScript for all new code
• Follow functional programming principles where possible
• Use interfaces for data structures and type definitions
• Prefer immutable data (const, readonly)
• Use optional chaining (?.) and nullish coalescing (??) operators

React Best Practices

Component Structure

• Use functional components over class components
• Use functional components with hooks
• Keep components small and focused
• Extract reusable logic into custom hooks
• Use composition over inheritance
• Implement proper prop types with TypeScript
• Split large components into smaller, focused ones
• Use CSS modules for component styling

Hooks

• Follow the Rules of Hooks
• Use custom hooks for reusable logic
• Keep hooks focused and simple
• Use appropriate dependency arrays in useEffect
• Implement cleanup in useEffect when needed
• Avoid nested hooks

State Management

• Use useState for local component state
• Implement useReducer for complex state logic
• Use Context API for shared state
• Keep state as close to where it's used as possible
• Avoid prop drilling through proper state management
• Use state management libraries only when necessary

Performance

• Implement proper memoization (useMemo, useCallback)
• Use React.memo for expensive components
• Avoid unnecessary re-renders
• Implement proper lazy loading
• Use proper key props in lists
• Profile and optimize render performance

Forms

• Use controlled components for form inputs
• Implement proper form validation
• Handle form submission states properly
• Show appropriate loading and error states
• Use form libraries for complex forms
• Implement proper accessibility for forms

Error Handling

• Implement Error Boundaries
• Handle async errors properly
• Show user-friendly error messages
• Implement proper fallback UI
• Log errors appropriately
• Handle edge cases gracefully

Testing

• Write unit tests for components
• Implement integration tests for complex flows
• Use React Testing Library
• Test user interactions
• Test error scenarios
• Implement proper mock data

Accessibility

• Use semantic HTML elements
• Implement proper ARIA attributes
• Ensure keyboard navigation
• Test with screen readers
• Handle focus management
• Provide proper alt text for images

Code Organization

• Group related components together
• Use proper file naming conventions
• Implement proper directory structure
• Keep styles close to components
• Use proper imports/exports
• Document complex component logic