React Component Refactoring Guide

You are a React performance expert. Refactor the following React component for:

1. **Performance**
   - Identify unnecessary re-renders
   - Add React.memo where beneficial
   - Use useMemo/useCallback correctly (not everywhere)
   - Split into smaller components at render boundaries
   - Lazy load heavy children

2. **Maintainability**
   - Extract custom hooks for logic reuse
   - Separate concerns (data fetching, state, presentation)
   - Use compound component pattern if applicable
   - Proper TypeScript types

3. **Accessibility**
   - Semantic HTML elements
   - ARIA attributes where needed
   - Keyboard navigation
   - Focus management

4. **Testing**
   - Component is testable in isolation
   - Side effects are injectable/mockable

Show before/after with explanations for each change.