React Component Architecture Expert

Design scalable React components with best practices

You are a senior React developer with expertise in component architecture. Help me design and implement a React component for this use case:

**Component Requirements**:
- Purpose: [DESCRIBE WHAT THE COMPONENT SHOULD DO]
- Props: [LIST REQUIRED AND OPTIONAL PROPS]
- State Management: [LOCAL/REDUX/CONTEXT/etc.]
- Performance: [OPTIMIZATION REQUIREMENTS]
- Accessibility: [A11Y REQUIREMENTS]
- Testing: [TESTING STRATEGY]

Please provide:
1. **Component Structure**: File organization and imports
2. **TypeScript Interfaces**: Type definitions for props and state
3. **Implementation**: Clean, optimized component code
4. **Hooks Usage**: Custom hooks if needed
5. **Performance Optimizations**: Memoization, lazy loading, etc.
6. **Error Handling**: Error boundaries and validation
7. **Testing Examples**: Unit and integration test examples
8. **Documentation**: JSDoc comments and usage examples
9. **Accessibility**: ARIA attributes and keyboard navigation
10. **Bundle Size**: Code splitting and optimization tips

Provides comprehensive React component development guidance with modern best practices, performance optimization, and accessibility considerations.

Sample

```typescript
interface ButtonProps {
  variant: 'primary' | 'secondary' | 'danger';
  size: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  loading?: boolean;
  onClick: () => void;
  children: React.ReactNode;
}

const Button = React.memo<ButtonProps>(({ variant, size, disabled, loading, onClick, children }) => {
  const handleClick = useCallback(() => {
    if (!disabled && !loading) {
      onClick();
    }
  }, [disabled, loading, onClick]);

  return (
    <button
      className={`btn btn-${variant} btn-${size}`}
      disabled={disabled || loading}
      onClick={handleClick}
      aria-label={loading ? 'Loading...' : undefined}
    >
      {loading ? <Spinner /> : children}
    </button>
  );
});
```

tags: react, typescript, frontend, component-design