React Component Refactoring Guide
Refactor React components for performance, accessibility, and maintainability
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.
0