aafre / aafre/resume-builder

perf(editor): Extract memoized list item components to prevent callback recreation

Aperta
#204 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
enhancement good first issue performance
Lingua principale
TypeScript
Stelle
6
Fork
15
Merge medio
7g 22h
PR unite (30g)
2

Descrizione

## Summary
Extract list items into memoized sub-components with `useCallback` handlers to prevent unnecessary re-renders from inline callback creation.

## Background
Identified in PR #196 review: https://github.com/aafre/resume-builder/pull/196#discussion_r2674280330

Inline callbacks in `.map()` loops create new function instances on every render, causing child components to re-render unnecessarily.

## Affected Files
- `ExperienceSection.tsx` - Lines 131, 187, 198, 210, 230, 259 (most critical - nested loops)
- `EducationSection.tsx` - Lines 165, 185, 199, 210, 223, 234
- `GenericSection.tsx` - Lines 130, 149, 155, 190, 209, 215, 250, 269, 275
- `IconListSection.tsx` - Lines 144, 165, 181, 194, 205, 213
- `ContactInfoSection.tsx` - Lines 152, 176, 206, 229

## Approach
1. Create memoized sub-components:
- `DescriptionItem` for experience descriptions
- `ExperienceEntry` for experience cards
- `EducationEntry` for education cards
- `ListItem` variants for GenericSection
- `CertificationItem` for IconListSection
- `SocialLinkItem` for ContactInfoSection

2. Use `React.memo()` wrapper on sub-components
3. Use `useCallback` for handlers inside sub-components
4. Pass stable callbacks from parent (memoized with `useCallback`)

## Example Pattern
```tsx
// Before
{items.map((item, index) => (
handleUpdate(index, value)} />
))}

// After
const MemoizedItem = React.memo(({ index, onUpdate }) => {
const handleChange = useCallback((value) => onUpdate(index, value), [index, onUpdate]);
return ;
});

Priority

Medium - Performance optimization. Most impactful for resumes with many experience entries and description points.

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.